react js：如何为一次只显示一个项目的文本数组设置动画

Question

我对使用 ReactJS 处理动画非常陌生。 我一直在尝试为文本数组设置动画（例如items: ["Text 1", "Text 2, "Text 3", ...] ，以便在给定的时间点只有一个可见并且它保持循环遍历所有项目。没有动画，它是直截了当的，但我想通过适当的动画来实现这一点（比如淡入/淡出等）

我尝试ReactCSSTransitionGroup ，但其文档中给出的所有示例仅涵盖添加和删除数组并将所有这些示例一起显示。

这是我到目前为止所尝试的

export default class TextAnimate extends Component{
    constructor(props){
       super(props);
       this.state = {
                selectedText : this.props.items[0]
            }
            this.itemCounter = 0;
       }
    componentDidMount() {
            var context = this;
            if(this.props.items.length > 1){
                this.intervalTimer = window.setInterval(()=>{
                    context.setState({selectedText:this.props.items[context.itemCounter++]})
                    if(context.itemCounter == context.props.items.length){
                        context.itemCounter = 0;   
                    }
                },3000);
            }
        }
    render(){
            return(
                <ReactCSSTransitionGroup
                    transitionName="example"
                    transitionAppear={true}
                    transitionAppearTimeout={1500}
                    transitionEnterTimeout={800}
                    transitionLeaveTimeout={800}>
                    <div className="item">
                        {this.state.selectedText}
                    </div>
                </ReactCSSTransitionGroup>
            );
        }
    }

Answer 1

以下是使用framer-motion方法：

export default class TextAnimate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedText: this.props.items[0],
    };
    this.itemCounter = 0;
  }

  render() {
    const items = this.props.items;
    return (
      <ul>
        {items.length
          ? items.map((movie, i) => (
              <motion.li
                variants={itemVariants}
                initial="initial"
                animate="animate"
                transition={{ duration: 0.4, delay: i * 0.3 }}
                className="item">
                {this.state.selectedText}
              </motion.li>
            ))
          : null}
      </ul>
    );
  }
}

这样，您就可以stagger这些项目。 在此处检查成帧器运动：

• https://www.framer.com/docs/
• https://www.npmjs.com/package/framer-motion