react学习笔记-过渡动画（5）

4-11、React中实现css过渡动画

handleToggle () {
    this.setState({
      show: this.state.show ? false : true
    })
  }
<Fragment>
        <div className={this.state.show ? 'show':'hide'}>hello world</div>
        <button onClick={this.handleToggle}>toggle</button>
      </Fragment>
style.css
.show{
  opacity: 1;
  transition: all 1s ease-in;
}
.hide{
  opacity: 0;
  transition: all 1s ease-in;
}

4-12、React中实现css动画效果

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

@keyframes hide-item{
  0% {
    opacity: 1;
    color: red;
  }
  50% {
    opacity: .5;
    color: green;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

4-13、使用react-transition-group实现动画（1）

https://github.com/reactjs/react-transition-group

• npm install react-transition-group --save // 安装插件

import { CSSTransition } from 'react-transition-group'
<CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames='fade'
          unmountOnExit {/* 隐藏时移除DOM */}
          onEntered={(el) => {el.style.color = 'blue'}} {/* 初始化时钩子 */}
          appear={true} {/* 初始化时执行动画，需要添加.fade-appear及.fade-appear-active类 */}
><div>CSSTransition</div>
</CSSTransition>

• style.css

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

4-14、使用react-transition-group实现动画（2）

import { CSSTransition,TransitionGroup } from 'react-transition-group'
handleToggle () {
    this.setState((prevState) => {
      return {
        show: this.state.show ? false : true,
        list: [...prevState.list,'item']
      }
    })
  }
<TransitionGroup>
  {
    this.state.list.map((item,index) => {
      return (
        <CSSTransition
          timeout={1000}
          classNames='fade'
          unmountOnExit
          onEntered={(el) => {el.style.color = 'blue'}}
          appear={true}
          key={index}
        >
          <div>TransitionGroup</div>
        </CSSTransition>
      )
    })
  }
</TransitionGroup>