React中过渡动画的编写方式实例详解

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      isShow: false
    }
  }

  render() {
    const { isShow } = this.state

    return (
      <div>
        <button onClick={() => this.setState({ isShow: !isShow })}>切换</button>
        {/* timeout和unmountOnExit是必须要加的 */}
        <CSSTransition timeout={2000} unmountOnExit={true} in={isShow} classNames="abc">
          <h2>哈哈哈</h2>
        </CSSTransition>
      </div>
    )
  }
}

/* 要进入的状态 */
.abc-enter {
  opacity: 0;
}

/* 进入过程的状态 */
.abc-enter-active {
  opacity: 1;
  transition: opacity 2s ease;
}

/* 要离开的状态 */
.abc-exit {
  opacity: 1;
}

/* 离开过程的状态 */
.abc-exit-active {
  opacity: 0;
  transition: opacity 2s ease;
}

<CSSTransition 
  timeout={2000} 
  unmountOnExit={true}
  in={isShow} 
  classNames="abc"
  onEnter={() => console.log("准备开始执行进入动画")}
  onEntering={() => console.log("执行进入动画")}
  onEntered={() => console.log("进入动画执行结束")}
  onExit={() => console.log("准备开始执行离开动画")}
  onExiting={() => console.log("执行离开动画")}
  onExited={() => console.log("离开动画执行结束")}
>
  <h2>哈哈哈</h2>
</CSSTransition>

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      isOn: true
    }
  }

  render() {
    const { isOn } = this.state

    return (
      <div>
        <SwitchTransition mode='out-in'>
          <CSSTransition 
            timeout={1000} 
            unmountOnExit={true} 
            key={isOn ? "ON" : "OFF"}
            classNames="handoff"
          >
            <button onClick={() => this.setState({ isOn: !isOn })}>
              {isOn ? "ON" : "OFF"}
            </button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}

.handoff-enter {
  transform: translateX(100px);
  opacity: 0;
}

.handoff-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 1s linear;
}

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

.handoff-exit-active {
  transform: translateX(-100px);
  opacity: 0;
  transition: all 1s linear;
}

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      students: [
        {name: "aaa", age: 18},
        {name: "bbb", age: 19},
        {name: "ccc", age: 20},
        {name: "ddd", age: 21}
      ]
    }
  }

  changeStudent(add = true, index) {
    const students = [...this.state.students]
    if(add) {
      students.push({name: new Date().getTime(), age: 22})
    } else {
      students.splice(index, 1)
    }
    this.setState({ students })
  }

  render() {
    const { students } = this.state

    return (
      <div>
        <h3>学生信息</h3>
        {/* component控制渲染成什么元素, 默认为div */}
        <TransitionGroup component="ul">
          {
            students.map((item, index) => {
              return (
                <CSSTransition key={item.name} classNames="stu" timeout={1000}>
                  <li>
                    <span>姓名: {item.name} - 年龄: {item.age}</span>
                    <button onClick={() => this.changeStudent(false, index)}>删除</button>
                  </li>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        <button onClick={() => this.changeStudent()}>添加学生信息</button>
      </div>
    )
  }
}

.stu-enter {
  transform: translateX(100px);
  opacity: 0;
}

.stu-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 1s ease;
}

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

.stu-exit-active {
  transform: translateX(100px);
  opacity: 0;
  transition: all 1s ease;
}