- 安装插件
npm install react-addons-css-transition-group
- 引入插件
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
- 基础用法
用ReactCSSTransitionGroup标签包裹住要添加动画效果的react组件
<ReactCSSTransitionGroup
transitionName="fadeLeft"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{
this.state.showSideBar ?
(
<div onClick={this.handleShowSideBar} className="side-bar" key="side-bar">
<ul>
<NavLink to="/home"><li>首页<Icon type="right" /></li></NavLink>
<NavLink to="/withdraw"><li>提现<Icon type="right" /></li></NavLink>
<NavLink to="/help"><li>帮助中心<Icon type="right" /></li></NavLink>
</ul>
</div>)
:
null
}
</ReactCSSTransitionGroup>
其中,组件根据showSideBar的值来显示或者隐藏。
注意: 1,transitionName属性,相当于vue的transition标签的name属性,指定css类名
对应css如下:
.fadeLeft-enter {
/* opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0); */
}
.fadeLeft-enter-active {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.fadeLeft-leave {
/* opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); */
}
.fadeLeft-leave-active {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
2,transitionEnterTimeout, transitionLeaveTimeout 分别是组件进入时长和移出时长,必须与css里定义的动画时长一一对应。
3,子元素必须有一个key属性,就算只有一个子元素,key值必须是唯一的。为了让react确定哪个子元素插入了,哪个移出了,那个不变。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
其他用法
- 1、可选属性transitionAppear, 默认是false,如果设为true,在组件的初始化时就会添加一个额外的转换阶段。
对应的动画时长属性为transitionAppearTimeout
对应的css类为 fadeLeft-appear fadeLeft-appear-active
- 2、transitionEnter 和 transitionLeave默认都是true
所以两者的动画时间必须要指定,如果不需要进入和移出动画,可以手动指定两者属性为false
- 3、自定义类名
transitionName属性值可以是字符串,如上。也可以指定为一个Object, 如下:
前者指定了每个阶段的css类名。当没有指定active的类名时,例如后者,react会自动在enter leave appear的类名的后面加 上‘-active’。
<ReactCSSTransitionGroup
transitionName={ {
enter: 'enter',
enterActive: 'enterActive',
leave: 'leave',
leaveActive: 'leaveActive',
appear: 'appear',
appearActive: 'appearActive'
} }>
{item}
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup
transitionName={ {
enter: 'enter',
leave: 'leave',
appear: 'appear'
} }>
{item2}
</ReactCSSTransitionGroup>
- 4、ReactCSSTransitionGroup组件必须挂载到页面后才能生效。
页面加载之后,新生成的组件,指定的动画无效
- 5、ReactCSSTransitionGroup和ReactTransitionGroup
默认生成一个span标签包裹子组件,可以通过component属性来重新指定父标签。
- 6、当只渲染一个子组件时,不想让子组件被span或者ul等标签包裹,即ReactCSSTransitionGroup和ReactTransitionGroup标签下直接显示子组件。
这时可以指定 component属性为 component={List}, ReactCSSTransitionGroup和ReactTransitionGroup包裹的子组件会被 作为props.children传递下去,如下:
function FirstChild(props) {
const childrenArray = React.Children.toArray(props.children);
return childrenArray[0] || null;
}
<ReactTransitionGroup component={FirstChild}>
{someCondition ? <MyComponent /> : null}
</ReactTransitionGroup>
-
动画的声明周期
componentWillAppear(callback)
跟componentDidMount同时发生,只有在TransitionGroup组件初次挂载时生效,在回调函数执行完之前,设定的动画会被锁定
componentDidAppear()
在componentWillAppear()的回调执行结束后执行
componentWillEnter(callback)
跟已经存在的TransitionGroup组件的componentDidMount的同时执行,在初始挂载TransitionGroup组件时不会执行
componentDidEnter()
在componentWillEnter(callback)的回调执行结束后执行
componentWillLeave(callback)
当TransitionGroup组件的子组件被移除时执行,在回调函数执行完之前,即使子组件已经被移除,TransitionGroup组件仍然存在DOM中
componentDidLeave()
在willLeave的回调执行结束后,与componentWillUNmount()同时发生