React react-transition-group实现动画

wuchangjian2021-11-26 19:07:01编程学习

css3动画:

import React, { Component } from "react";
import './style.css'
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: true
    }
    this.handleToggole = this.handleToggole.bind(this);
  }

  handleToggole() {
    this.setState({
      show: !this.state.show
    })
  }
  render() {
    return (
      <React.Fragment>
        <div className={this.state.show ? "show" : "hide"}>hello</div>
        <button onClick={this.handleToggole}>toggle</button>
      </React.Fragment>
    )
  }
}
/* 简单css动画 */
.hide{
  animation:hide-item 2s forwards;
}

@keyframes hide-item{
  0%{
    opacity:1;
    color:coral;
  }
  50%{
    opacity: 0.5;
    color:olive;
  }
  100%{
    opacity: 0;
    color:hotpink;
  }
}

react-transition-group实现动画:(React Transition Group)

        指令——npm install react-transition-group --save

import React, { Component } from "react";
import { CSSTransition } from 'react-transition-group';
import './style.css'
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: true
    }
    this.handleToggole = this.handleToggole.bind(this);
  }

  handleToggole() {
    this.setState({
      show: !this.state.show
    })
  }
  render() {
    return (
      <React.Fragment>
        <CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames="fade"
          unmountOnExit
          onEntered={(el) => { el.style.color = "blue" }}
          appear={true}>
          <div >hello</div>
        </CSSTransition>
        <button onClick={this.handleToggole}>toggle</button>
      </React.Fragment>
    )
  }
}

 

/* 入场动画 appear表示第一次*/
.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;
  transition: opacity 1s ease-in;

}
.fade-exit-done{
  opacity:0;
}

相关文章

[react] 你觉得react上手快不快?它有哪些限制?

[react] 你觉得react上手快不快?它有哪些限制?...

华为顶级工程师潜心三年总结出这篇Java亿级高并核心编程手册。

华为顶级工程师潜心三年总结出这篇Java亿级高并核心编程手册。

移动时代、5G时代、物联网时代的大幕已经开启,新时代提升了对Java应用的...

.NET Core和SignalR实现一个简单版聊天系统——服务端2

上一篇完成了服务端的数据库搭建以及登录和注册的方法。               ...

基尼系数的推导以及实现

目录 基尼系数 什么是基尼系数 基尼系数的定义 基尼系数的计算公式推导...

Pygame入门

Pygame入门

        Pygame顾名思义是用Python编写的游戏模块。通过此模块ÿ...

oeasy教您玩转vim - 70 - # 折叠细节

oeasy教您玩转vim - 70 - # 折叠细节

折叠细节 回忆上次 上次我们讲的是折叠 折叠有很多options foldle...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。