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

╰+哭是因爲堅強的太久メ 2022-04-05 18:54 215阅读 0赞

*  安装插件

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’。

*  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（）**