React 基础笔记(CSS react-transition-group 过渡动画版本)(二十)

React

发布日期: 2019-12-12

更新日期: 2019-12-08

文章字数: 277

阅读时长: 1 分

阅读次数:

安装 React 动画必须安装包 react-transition-group

npm i react-transition-group -S

利用 CSSTransition 作为壳子套 html 标签

in 表示开关是否执行
timeout 表示动画执行的时间
appear 表示是否一加载就执行
className 动画执行的名称
unmountOnExit 动画执行完节点消失
onEnter 表示钩子函数刚进入的时候，里面就一个参数 el
onEnter onEntering onEntered onExit onExiting onExited 钩子函数

组件

import './donghua.css'

class Donghua extends Component {
  constructor(props) {
    super(props)
    this.state = {
      flag: true
    }
  }
  render() {
    return (
      <CSSTransition
        in={this.state.flag}
        timeout={2000}
        appear={true}
        classNames="fade"
        unmountOnExit
        onEnter={el => {
          el.style.color = 'red'
        }}
      >
        <Fragment>
          <div>红色</div>
        </Fragment>
      </CSSTransition>
    )
  }
}

donghua.css

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

ReactCss 动画组合

<TransitionGroup key={index}>
  <CSSTransition
    in
    timeout={2000}
    appear={true}
    classNames="fade"
    unmountOnExit
    onEnter={el => {
      el.style.color = 'red'
    }}
  >
    <List content={item} index={index} deletedate={this.deleteone.bind(this)} />
  </CSSTransition>
</TransitionGroup>