react中使用动画

1. css原生动画的使用

import React, { useState } from "react"
import "./index.css"

function App() {
  const [show, setShow] = useState(true)
  const toogle = () => {
    setShow(!show)
  }
  return (
    <div>
      <div className={show ? "show" : "hide"}>hello,world</div>
      <button className="btn" onClick={toogle}>
        toogle
      </button>
    </div>
  )
}

export default App

样式

.show {
  opacity: 1;
  transition: all 1s;
}

.hide {
  opacity: 0;
  transition: all 1s;
}

2.使用keyframes动画

.show {
  animation: show-item 1s ease-in forwards;     // forwards 表示保存动画最后一帧的状态
}

.hide {
  animation: hide-item 1s ease-in forwards;
}

@keyframes show-item {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
    color: pink;
  }
  100% {
    opacity: 1;
    color: green;
  }
}
@keyframes hide-item {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

3.使用 react-transition-group实现动画

 

.fade-enter {
  opacity: 0;
}

.fade-enter-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;
}

 

<CSSTransition in={show} classNames="fade" timeout={10000} unmountOnExit>  unmountOnExit 表示隐藏的时候卸载该组件
   <div>hello,world</div>
</CSSTransition>

刷新页面没有动画  需要加上 appear={true}

 

 

Transition / CSSTransition / TransitionGroup

 

Transition 相比较于 CSSTransition更加底层

 

 

4.列表动画

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