如何在当前会话期间只运行一次动画？

编程问答 2022-05-31

问题描述

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

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

代码如下：

index.js@H_502_14@

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@H_502_14@

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@H_502_14@

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>
    )
}

解决方法

我做了一个使用 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

anime.jsjavascriptreactjsreactjs