i have this code that replace index in array every 5s to display different text

    const [articles, setArticles] = useState(0)

    const [imageBanner, setImageBanner] = useState([
    {
        text: "blah blah"
    },
    {
        text: "blah blah"
    },
    {}
])

   setInterval(() => {
        if (articles < 3) {
            setArticles(articles => articles   1)
        }
        console.log(articles)
    }, 5000);

and i would like to know how can i make opacity animation when text replacement

what i tried before

@keyframes example {
0% {
    opacity: 0;
}
3% {
    opacity: 0.2;
}
6% {
    opacity: 0.4;
}
8% {
    opacity: 0.6;
}
10% {
    opacity: 0.8;
}
50% {
    opacity: 1;
}
90% {
    opacity: 0.8;
}
93% {
    opacity: 0.6;
}
96% {
    opacity: 0.4;
}
98% {
    opacity: 0.2;
}
100% {
    opacity: 0;
}

}

But the timing of it is not good

CodePudding user response：

Instead of using a setInterval, use the timing of the animation to change the text of the element.

By using a useRef hook we can create a reference to our animation element. Then listen to animationiteration event on that element. This event will trigger every time it starts again.

For this to work we'll need to modify the CSS animation and tell it either to go N times or infinite times.

When the event is called, use setArticleIndex to count to the next item (or to 0 whenever the end of the list is reached).

const { useRef, useState, useEffect } = React;

const imageBanners = [
  { text: "Hello There" },
  { text: "General Kenobi" },
  { text: "You are a bold one" }
];

const Component = () => {
  const animationEl = useRef(null);
  const [articleIndex, setArticleIndex] = useState(0);

  useEffect(() => {
    animationEl.current.addEventListener('animationiteration', () => {
      setArticleIndex(currentIndex => {
        if (currentIndex   1 < imageBanners.length) {
          return currentIndex   1;
        } else {
          return 0;
        }
      });
    });
  }, []);
  
  return (
     <div className="fade-in-out" ref={animationEl}>
       {imageBanners[articleIndex].text}
     </div>
  );
};

const app = document.querySelector('#app');
ReactDOM.render(
  <Component />, 
  app
);

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }

  5%,
  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fade-in-out {
  animation: fade-in-out 5s both infinite;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="app"></div>

CodePudding user response：

This code should work by using animation and animation-fill-mode.

@keyframes move {
  from {
    opacity: 0;
  }
  3% {
    opacity: 0.2;
  }
  6% {
    opacity: 0.4;
  }
  8% {
    opacity: 0.6;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  93% {
    opacity: 0.6;
  }
  96% {
    opacity: 0.4;
  }
  98% {
    opacity: 0.2;
  }
  to {
    opacity: 0;
  }
}

h1 {
  animation-name: move;
  animation-delay: 0s;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

<h1>Hello, World</h1>