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 钩子函数

  {
            el.style.color = 'red'
          }}
        >
          

            
hello
          
        

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包起来。

  
                 {
                    el.style.color = 'red'
                  }}
                >