如何在当前会话中只运行一次动画？答案

【问题标题】：How to run animation only once while current session?如何在当前会话中只运行一次动画？
【发布时间】：2021-01-03 20:13:38
【问题描述】：

我有一个使用react-anime 和react-typing-animation 的网站页面。我的问题是在当前会话中仅对显示在其上的某些元素进行动画处理。所以，如果我的网站在主页面打开，动画就会启动，然后在切换几页后返回主页面，动画就不会再执行了。

我考虑过sessionStorage，但我不明白如何将它与这些库一起使用。

这是所有代码：

index.js

import React from 'react'
import styles from './Index.module.css'
import Greeting from '../components/main/Greeting'
import Yelnya from '../components/main/Yelnya/Yelnya'
import BlueLakes from '../components/main/BlueLakes'
import Gallery from "../components/main/Gallery";


export default function Home() {
    return (
        <div className={styles.container}>
            <Greeting />
            <Yelnya />
            <BlueLakes />
            <Gallery />
        </div>
    )
}

Greeting.js

import React from 'react'
import styles from './Greeting.module.css'
import Tag from './Tag'
import Anime from "react-anime";
import Typing from "react-typing-animation"


export default function Greeting() {
    return (
        <div className={styles.root}>
            <div className={styles.title}>
                <Typing startDelay={50} speed={100}>
                    Explore Belarusian nature with us.
                </Typing>
            </div>
            <div className={styles.hint}>
                <Anime
                    opacity={[0,1]}
                    translateX={[-50,0]}
                    duration={3000}
                    delay={4200}
                >
                    <p className={styles.hintTitle}>Go to:</p>
                </Anime>
                <Tag title="#Yelnya" link="/#yelnya" delay={4400}/>
                <Tag title="#Blue lakes" link="/#blue-lakes" delay={4500}/>
                <Tag title="#Galleries" link="/#galleries" delay={4600}/>
            </div>
        </div>
    )
}

Tag.js

import React from 'react'
import styles from './Tag.module.css'
import Link from 'next/link'
import Anime from "react-anime";


export default function Tag({ title, link, delay }) {
    return (
        <Anime
            opacity={[0,1]}
            translateY={[50,0]}
            duration={3000}
            delay={delay}
        >
            <Link href={link}>
                <div className={styles.tag}>
                    <p className={styles.text}>{title}</p>
                </div>
            </Link>
        </Anime>
    )
}

【问题讨论】：

标签： javascript reactjs next.js anime.js

【解决方案1】：

我做了一个使用 LocalStorage 的例子并用它们处理动画

export default function App() {
  const animated = !!localStorage.getItem("animated");

  if (animated === false) {
    localStorage.setItem("animated", true);
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {!animated && (
        <Anime
          opacity={[0, 1]}
          translateX={[-50, 0]}
          duration={3000}
          delay={500}
        >
          <p>Go to:</p>
        </Anime>
      )}
      {animated && <p>Go to:</p>}
    </div>
  );
}

你也可以测试一下here

【讨论】：