react 组件动画 react-addons-css-transition-group

安装插件

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（）同时发生

react 组件动画 react-addons-css-transition-group

其他用法

动画的声明周期

猜你喜欢