06-react-动画效果、react-transition-group

基础的过渡动画

      <div>
        <div className={this.state.show? 'show' : 'hide'}>hello</div>
        <button onClick={this.handleToggle.bind(this)}>toggle</button>
      </div>

通过点击按钮切换state中show的值，来给div加不同的class

在一个css文件中，写下如下的样式

.show{
  opacity: 1;
  transition: all 1s ease-in;
}
.hide{
  opacity: 0;
  transition: all 1s ease-in;
}

css 的动画效果

根据keyframes做一些动画效果

.show{
  animation: show-item 2s ease-in forwards;
}
@keyframes show-item{
  0% {
    opacity: 0;
    color:blue;
  }
  50% {
    opacity: 0.5;
    color:green;
  }
  100% {
    opacity: 1;
    color:red;
  }
}
.hide{
  animation: hide-item 2s ease-in forwards;
}
@keyframes hide-item{
  0% {
    opacity: 1;
    color:red;
  }
  50% {
    opacity: 0.5;
    color:green;
  }
  100% {
    opacity: 0;
    color:blue;
  }
}

动画模块

在react中借助react-transition-group这个包，需要通过npm install 下载并引入

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

那个div块需要加动画，就用这个CSSTransition组件包裹起来就可以。

• in入场动画根据那个变量来控制
• timeout动画完成时间
• unmountOnExit 当这个元素不显示后，从dom结构中将其移除掉
• appear={true}控制这个元素第一次出现时也使用动画效果
• 这个动画组件中有钩子函数，比如onEntered={(el)=>{}}这个el就是所包裹的这个div

<CSSTransition
        in={this.state.show}
        timeout={1000}
        classNames='fade'
        unmountOnExit
        appear={true}
        onEntered={(el)=>{el.style.color = 'green'}}
        >
        <div>hello</div>
</CSSTransition>

这个组件只会加上这些样式类，具体的样式变化还需要自己编写

.fade-enter,.fade-appear{
  opacity: 0;
}
.fade-enter-active,.fade-appear-active{
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-enter-done{
  opacity: 1;
}
.fade-exit{
  opacity: 1;
}
.fade-exit-active{
  opacity: 0;
  color:blue;
  transition: opacity 1s ease-in;
}
.fade-exit-done{
  opacity: 0;
}

tips：

如果需要多个item都需要动画，则引入TransitionGroup组件，使用TransitionGroup组件包裹上面的单个动画组件，去掉in即可

 <TransitionGroup>
        {
          this.state.list.map((item, index)=>{
            return (
              <CSSTransition
                timeout={1000}
                classNames='fade'
                unmountOnExit
                appear={true}
                key={index}
                onEntered={(el)=>{el.style.color = 'green'}}
                >
                <div>{item}</div>
              </CSSTransition>
            )
          })
        }
        </TransitionGroup>