【React自制全家桶】八、React动画以及react-transition-group动
React动画通常有三种方法实现从易到难为: 1、transition(CSS3自带) 2、animation(CSS3自带) 3、react-transition-group动画库(需要引入插件) ? 一、transition(CSS3自带) 1、用法示例: .hide{ /*过渡动画效果*/ 含义:透明度在1s内从0渐变为1 ? 2、transition其他参数 建议参考(http://www.runoob.com/cssref/css3-pr-transition.html)详细学习
? 3、区别transform transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。所以,transform属性只对元素进行变换,不会产生过渡效果。 建议参考(http://www.runoob.com/cssref/css3-pr-transform.html)详细学习 ? ? 二、animation(CSS3自带) 1、用法示例: .hide{
/*过渡动画效果*/
animation: animation-name 2s ease-in forwards;
}
@keyframes animation-name {
0% {
opacity: 1;
color: red;
}
50% {
opacity: 0.5;
color: blue;
}
100%{
opacity: 0;
color: yellow;
}
}
animation相对于transition的好处是可以一帧一帧的控制动画,自由度更高。 ? ? 三、react-transition-group动画库(需要引入插件) 1、为什么要用react-transition-group? 因为有一些动画用animation和transition很难实现甚至不能实现,这时react-transition-group就非常必要啦 ? 2、安装react-transition-group库 ? yarn add react-transition-group
? 3、官方文档地址:http://reactcommunity.org/react-transition-group/(强烈建议一定要先打开这个文档再继续向下阅读哦) ?react-transition-group库有三个可使用的组件:
(1)主要使用CSSTransition(单标签的动画)和TransitionGroup(多标签的动画) (2)Transition是更接近底层的动画,当时用CSSTransition和TransitionGroup都不能实现需要的动画时可以考虑使用Transition ? 4、React使用示例:(核心部分均标蓝) ?js部分: import React,{ Component,Fragment} from ‘react‘;
// 引入react-transition-group动画组件 import { CSSTransition,TransitionGroup } from ‘react-transition-group‘;
class AppTra extends Component{
constructor(props){
super(props);
this.state = {
list:[]
};
this.handleAddItem = this.handleAddItem.bind(this);
}
handleAddItem(){
this.setState((prevState)=>{
return{
list: [...prevState.list,‘666‘]
}
})
}
render(){
return (
// Fragment是占位符
<Fragment>
<TransitionGroup> { this.state.list.map((item,index)=>{ return( <CSSTransition in={this.state.show} //动画时间 timeout={1000} // 前缀名注意S classNames=‘fade‘ unmountOnExit onEntered={(el)=>{ el.style.color=‘blue‘ }} // 入场第一帧 appear={true} key={index} > <div>{item}</div> </CSSTransition> ) }) } <button onClick={this.handleAddItem}>toggle</button> </TransitionGroup>
</Fragment>
)
}
}
// 导出组件
export default AppTra
css部分: /*入场动画*/
.fade-enter,.fade-appear{
/*入场动画执行的第一个时刻*/
opacity: 0;
}
.fade-enter-active,.fade-appear-active{
/*入场动画执行的第二个瞬间一直到执行完成的时刻*/
opacity: 1;
transition: opacity 1s ease-in;
}
.fade-enter-done{
/*入场动画执行完成之后*/
opacity: 1;
color: red;
}
/*出场动画*/
.fade-exit{
opacity: 1;
}
.fade-exit-active{
opacity: 0;
transition: opacity 1s ease-in;
}
.fade-exit-done{
opacity: 0;
}
大家动手试试吧 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |