11-react 过度动画

在开发中我们通常使用react-transition-group库完成一些过度动画

官网:React Transition Group

安装

yarn add react-transition-group

react-transition-group本身非常小,不会为我们应用程序增加过多的负担

使用

11-react 过度动画

 CSSTransition的使用

11-react 过度动画

11-react 过度动画

11-react 过度动画

11-react 过度动画

 timeout的时间与css里时间作用

timeout:控制类名添加的时间

css里的时间是做动画的时间

timeout和css里时间最好保持一致

SwitchTransition的使用

11-react 过度动画

11-react 过度动画

11-react 过度动画

 TransitionGroup的使用

11-react 过度动画

上一篇:CSS动画


下一篇:快速幂