如何添加动画以反应状态

Question

我只想为下一个索引添加淡入动画。我找到了一个名为“react transition group”的包，但所有教程都是基于 class 组件或 redux 我什么都不懂。

const AboutTestimonials = () => {
  const [index, setIndex] = useState<any>(0);
  const [data] = useState(AddTestimonial);
  const current = data[index];

  return (
    <div className="testimonials__container">
      <div className="testimonials__description">
        <h3>TESTIMONIALS</h3>
        <p>{current.quote}</p>
        <h5 className="author__testimonials">{current.postedby}</h5>
        <h6 className="job__testimonials">{current.profession}</h6>
      </div>
      <div className="testimonials__pagination">
        <Image
          src={leftarrow}
          alt="arrow"
          onClick={() => setIndex(index > 0 ? index - 1 : index)}
          className="pagination__arrows"
        />
        <p>{index + 1} / 5</p>
        <Image
          src={rightarrow}
          alt="arrow"
          onClick={() => setIndex(index < 4 ? index + 1 : index)}
          className="pagination__arrows"
        />
      </div>

Answer 1

SwitchTransition 等待旧的 child 退出然后呈现新的 child，如 react transition group website.
中所述有两种模式：

in-out
out-in

重要的因素是改变 child component.child 组件的关键属性可以是 CSSTransition 或 Transition。如果你想同时改变过渡，你可以使用TransitionGroup.

side note: if you want to use the AddTestimonial in your component and you don't want to change the state (I noticed there is no second argument for setting the data), there is no need to declare a useState.it is much better to set AddTestimonial as a prop on AboutTestimonials component

import { CSSTransition, SwitchTransition } from 'react-transition-group';
const AboutTestimonials = () => {
  const [index, setIndex] = useState<any>(0);
  const [data] = useState(AddTestimonial);
  const current = data[index];

  return (
    <div className="testimonials__container">
      <div className="testimonials__description">
        <h3>TESTIMONIALS</h3>
        <SwitchTransition mode={'out-in'} >
         <CSSTransition
           key={index}
           timeout={300}
           classNames="fade"
           >
          <>
           <p>{current.quote}</p>
           <h5 className="author__testimonials">{current.postedby}</h5>
           <h6 className="job__testimonials">{current.profession}</h6>
          </>
         </CSSTransition> 
       </SwitchTransition>
      </div>
      <div className="testimonials__pagination">
        <Image
          src={leftarrow}
          alt="arrow"
          onClick={() => setIndex(index > 0 ? index - 1 : index)}
          className="pagination__arrows"
        />
        <p>{index + 1} / 5</p>
        <Image
          src={rightarrow}
          alt="arrow"
          onClick={() => setIndex(index < 4 ? index + 1 : index)}
          className="pagination__arrows"
        />
      </div>
)}

css:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

如何添加动画以反应状态

How can I add animation to react state

javascript

reactjs

next.js

react-animations