关于前端:react中使用动画-reacttransitiongroup

在 React 中通过 react-transition-group 应用过渡、动画，首先要有 CSS3 中的过渡和动画的相干常识储备，能够参考过渡和 2D 变换、动画和 3d 变换。

咱们本人通过 css 设置过渡、动画，须要给不同的 class 增加变动属性，比方位移、缩放大小或者旋转角度，再通过切换类名来达到动画的成果，那么在 react-transition-group 当中，依然须要在不同的 class 上定义不同的 css 款式，简化的是，不须要咱们再来进行判断切换类名，它规定了进入动画、退出动画别离的 class 后缀，咱们只须要依照肯定的标准去定义这些 class 即可。

能够看到 class 是有一个变动的过程的，当传入属性的值由 true 变成 false 时，即显示到暗藏，class 的变动过程为 enter enter-active 及 enter-done，传入属性的值由 false 变成 true 时，及暗藏到显示，class 的变动过程为 exit exit-active 和 exit-done，晓得 react-transition-group 的利用法则之后，再来看看它提供的次要 API。

这样第三方的库，首先要做的事件就是装置 npm i react-transition-group –save

最罕用的是 CSSTransition，它提供了与 css 相干的变动，它提供了一些属性供咱们应用

(1) in 传入 boolean 值，传入的是 true 代表开启 enter enter-active 和 enter-done 的这一变动过程，传入 false 代码开启 exit exit-active exit-done 这一过程 (必传)
(2) timeout 示意执行工夫，enter-active 到 enter-done 或者 exit-active 到 exit-done 的执行工夫 (必传)
(3) classNames 定义增加的类名，这里定义的类名会被增加到 enter-xxx 及 exit-xxx 的之前
(4) ummountOnExit 默认为 false，示意当传入 in 的值为 false 值，CSSTransition 中的元素不从 dom 中移除，传 true 时则会被移除

能够看到 class 在 enter / exit 之前都减少了一个自定义的 class 属性 box，以及当方块隐没的时候，方块的 dom 元素被移除了，实现代码如下

// jsx 代码
import React, {Component} from "react";
import {CSSTransition} from 'react-transition-group'
import './style.css';

export default class CSSTransitionDemo extends Component {constructor(props){super(props);
    this.state = {isShow: true}
  }

  render(){const { isShow} = this.state;
    return(
      <div className="simpleTransition">
         <button onClick={()=>this.setState({isShow:!isShow})}>
              以后状态：{isShow ? '显示' : '暗藏'}</button>
         <CSSTransition in={isShow}
            classNames="box"
            timeout={1000}
            unmountOnExit={true}>
         <div className="helloBox">
            hello
         </div>
       </CSSTransition>
    </div>)
  }
}

// css 代码
.box-enter {
  opacity: 0;
  transform: scale(0.6)
}

.box-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 1000ms;
}

.box-exit {
  opacity: 1;
  transform: scale(1);
}

.box-exit-active {
  opacity: 0;
  transform: scale(.6);
  transition: all 1000ms
}

在下面我顺便点击了刷新按钮，能够看到第一次展现的时候是没有加载动画的，如果须要得自行定义，还能够减少动画操作阶段的回调办法

(5) appear 定义首次加载的动画, 同时须要在 css 中增加对应的类名和款式, 能够与 enter 统一
(6) 动画执行还有一些回调办法，需传入函数，函数有一个入参，参数为 CSSTransition 所包裹的元素
onEnter、onEntering、onEntered、onExit、onExiting、onExited

实现代码如下

// jsx
<CSSTransition in={isShow}
               classNames="box"
               timeout={1000}
               unmountOnExit={true}
               appear
               onEnter={el=>console.log('开始进入',el)}
               onEntering={el => console.log('正在进入')}
               onEntered={el => console.log('进入实现')}
               onExit={el => console.log('开始退出')}
               onExiting={el => console.log('正在退出')}
               onExited={el => console.log('退出实现')}>
    // ...
</CSSTransition>

// css
.box-enter, .box-appear {
  opacity: 0;
  transform: scale(0.6)
}

.box-enter-active, .box-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: all 1000ms;
}

这是最罕用的 CSSTransition，再来说说 SwitchTransition，SwitchTransition 的作用就是切换展现的内容，有两种模式，别离是先暗藏旧内容再展现新的内容（out-in），先展现新内容再展现旧内容（in-out）

实现代码如下，须要 CSSTransition 配合应用，此时 CSSTransition 不须要定义 in 属性，因为 in 属性为 false 时就间接不展现整个元素了，此时须要定义不同的 key 来进行辨别

// jsx
<SwitchTransition mode="out-in">
  <CSSTransition key={isShow ? 'on' : 'off'}
                 classNames="btn"
                 timeout={1000}>
    <button onClick={e=>this.setState({ isShow: !isShow})}>
         {isShow ? 'on' : 'off'}
    </button>
  </CSSTransition>
</SwitchTransition>

// css
.btn-enter {
  opacity: 0;
  transform: translateX(100%)
}

.btn-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s, transform 1s
}

.btn-exit {
  opacity: 1;
  transform: translateX(0)
}

.btn-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1s, transform 1s;
}

还有一个是 GroupTransition，用来给 CSSTransition 分组，当通过遍从来给元素增加 CSSTransition 的动画时，须要再最外层减少 GroupTransition 能力增加上动画

实现代码如下

<TransitionGroup>
   {this.state.movies.map((item, index)=>(<CSSTransition key={item.id}
                     classNames="movie"
                     timeout={1000}>
          <div>{item}</div>
       </CSSTransition>
    ))}
    <button onClick={e=>this.addMovies()}> 增加电影 </button>
</TransitionGroup>

对于遍历还要留神一点，自身 react 遍历数据时是心愿咱们加上惟一的 key 值，一方面是因为 dom 的 diff 算法进行比拟时可能进步性能，另一方面，有时候没有 key 值会呈现一些谬误，比方像以下状况，逆序删除元素的时候，删除的是第一个元素，然而却给最初一个元素增加了动画

以上就是 react-transition-group 当中罕用的三个组件，CSSTransition、SwitchTransition 与 TransitionGroup