React列表动画实现

最新推荐文章于 2024-08-28 09:38:26 发布

橡皮擦不掉的

最新推荐文章于 2024-08-28 09:38:26 发布

阅读量841

点赞数

文章标签： react javascript reactjs css3 html5

本文链接：https://blog.csdn.net/ZuoZuoDangerou/article/details/118578015

版权

本文介绍了如何在React中使用react-transition-group库实现列表的进入和离开动画。通过TransitionGroup和CSSTransition组件结合CSS样式，创建了添加和删除列表项时的平滑过渡效果。关键步骤包括设置唯一的key属性，定义CSS过渡效果以及绑定增加和删除操作的方法。

摘要由CSDN通过智能技术生成

在React列表动画实现

列表动画使用的react-transition-group中的TransitionGroup,CSSTransition。
使用TransitionGroup包裹CSSTransition实现列表。

效果图

首先安装react-transition-group包

npm i -s react-transition-group

state内容

this.state = {
           list:[],
           input:''
        }

增加和删除方法

handleClick(){
        this.setState(state=>{
            const input = state.input;
            const list = [...state.list,input];
            return {
                input:'',
                list
            }
        })
    }
handDel(index){
      const list = this.state.list.slice()
      list.splice(index,1)
      this.setState({
          list
      })
  }

列表渲染

<TransitionGroup>
  {this.state.list.map((r,index)=>
    <CSSTransition key={r} classNames='listEnter' timeout={500}>
       <ListItem text={r} del={this.handDel.bind(this,index)}/>
    </CSSTransition>
  )}
</TransitionGroup>

列表项

function ListItem(props) {
    return (
            <div className={css['listItem']}>
                <p>{props.text}</p>
                <span onClick={props.del}>×</span>
            </div>
    )
}

进入动画和离开动画

.listEnter-enter-active,.listEnter-exit-active{
  transition:all 0.5s ease-in-out;
}
.listEnter-enter{
  opacity: 0;
  transform: translateX(-100%);
}
.listEnter-enter-active{
  opacity: 1;
  transform: translateX(0);
}
.listEnter-exit{
  opacity: 1;
  transform: scale(1);
  max-height: 50px;
}
.listEnter-exit-active{
  opacity: 0;
  transform: scale(0);
  max-height: 0;
}