React入门(五)React动画

React动画

(1)必须依赖react-transition-group
(2)类的使用以及钩子函数

(一) react-transition-group使用

(1) 引入

import { CSSTransition} from 'react-transition-group'

(2) 使用

必须用CSSTransition套起来
in 表示开关
属性 timeout 表示动画的时间
appear = {true}表示一加载就执行
classNames = "fade" 表示起的变量名称
unmountOnExit表示用完了以后DOM消失
onEnter表示钩子函数刚进入的时候里面就一个参数el
onEnter ,onEntering ,onEntered onExit onExiting onExited 钩子函数

 <CSSTransition
          in={this.state.flag}
          timeout={2000}
          appear={true}
          classNames="fade"
          unmountOnExit
          onEnter={el => {
            el.style.color = 'red'
          }}
        >
          <div>
            <div>hello</div>
          </div>
        </CSSTransition>

PS :类名

fade-enter 刚入场的时候
fade-enter-active 全程参与
fade-enter-done 结束的时候
特别注意的就是 fade-appear-active这里看情况要是opacity就不加，要是运动之类的就必须加上最后的位置

.fade-enter,
.fade-appear {
  transform: translate(0, 0);
}
.fade-appear-active {
  transform: translate(80%, 0);
  transition: all 2s linear;
}
.fade-enter-active {
  transform: translate(80%, 0);
  transition: all 2s linear;
}
.fade-enter-done {
  transform: translate(80%, 0);
}
.fade-exit {
  transform: translate(80%, 0);
}
.fade-exit-active {
  transform: translate(0, 0);
  transition: all 2s linear;
}
.fade-exit-done {
  transform: translate(0, 0);
  color: blue;
}

(二) TransitonGroup

多个动画的特效。最外层必须用TransitionGroup包起来。

  <TransitionGroup key={index}>
                <CSSTransition
                  in
                  timeout={2000}
                  appear={true}
                  classNames="fade"
                  unmountOnExit
                  onEnter={el => {
                    el.style.color = 'red'
                  }}
                >
                  <List
                    content={item}
                    index={index}
                    deletedate={this.deleteone.bind(this)}
                  />
                </CSSTransition>
              </TransitionGroup>

React入门(五)React动画

React动画

推荐阅读更多精彩内容