使用react-transition-group实现动画

时间：2020-07-02 00:30:41 阅读：66 评论：0 收藏：0 [点我收藏+]

标签：red 钩子 mount bsp com style tps ide state

安裝：cnpm i react-transition-group

详细介绍：

https://reactcommunity.org/react-transition-group/css-transition

/* 显示 */
/* fade-appear第一次显示执行的样式 */
.fade-enter，fade-appear{
opacity: 0;
}
.fade-enter-active，fade-appear-active{
opacity: 1;
transition: opacity 1s ease-in ;
}
.fade-enter-done，fade-appear-done{   /* 动画执行完成后保留的样式 */
    opacity: 1;
}

/* 隐藏 */
.fade-exit{
    opacity: 1;
}
.fade-exit-active{
    opacity: 0;
transition: opacity 1s ease-in ;
}
.fade-exit-done{
    opacity: 0;
}


还需要引入定义的样式效果
需要的文件中引入：import { CSSTransition } from ‘react-transition-group‘;

<CSSTransition

in={this.state.show}

timeout={1000}

unmountOnExit//执行完成后dom销毁

classNames=‘fade‘

appear={true}//开启第一次执行展示的样式

// onEntered动画执行完成后执行的钩子函数

onEntered={(er)=>{er.style.color=‘red‘}}

</CSSTransition>

transition-group：https://reactcommunity.org/react-transition-group/transition-group

给多个div添加样式

引入TransitionGroup组件

import { CSSTransition, TransitionGroup } from ‘react-transition-group‘;

外层使用TransitionGroup，里面使用CSSTransition，那么CSSTransition 上面的 in={this.state.show}就不需要添加

{

this.state.list.map((itme,index) => {

return (

<CSSTransition

timeout={1000}

unmountOnExit//执行完成后dom销毁

classNames=‘fade‘

appear={true}//开启第一次执行展示的样式

// onEntered动画执行完成后执行的钩子函数

onEntered={(er)=>{er.style.color=‘red‘}}

key={index}

</CSSTransition>

)

})

}

</TransitionGroup>

aaditem(){

this.setState((propsstate)=>{

return{

list:[...propsstate.list,‘item‘]

}

})

}

使用react-transition-group实现动画

标签：red 钩子 mount bsp com style tps ide state

原文地址：https://www.cnblogs.com/nothingness/p/13222102.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行