周大胖子 发表于 2022-6-15 17:01:31

React自带的动画 react-transition-group 之 CSSTransition

import React from "react";
import { CSSTransition } from "react-transition-group";
import './anmiationc.css';

// 1. 安装 npm install --save react-transition-group
// 2. 从安装好的库中引入 import { CSSTransition } from "react-transition-group";
// 3. 将需要执行的元素或者组员 利用 CSSTransition包裹起来;
// 4. 编写对应的CSS动画效果 实现 :.-enter   /.-enter-active/ .-enter-done退出为 .-exit   ,初始化为 appear 注意前面需要设置前缀
// 5. 给CSSTransition 添加一些属性
//      in :取值是一个布尔值,如果取值为false ,表示退出动画;取值为true 表示出发进入动画
//      classNames : 注意 多来个S这是 css三个样式的前缀
//      timeout : 超时时间 最好和里面的css数值一样,1000 表示1秒
//      unmountOnExit:true 表示退出最后删除掉该元素 , false 表示不删除
//      appear: 表示为初始化的意思[加载页面就有的动画] 注意 如果有初始化动画 最好把 动画开关初始为true【亲测false 触发不了 】
// 6. 回调函数 有onEnter onEnteringonEntered 进入类事件[此类事件具有两个参数,第二个参数是判断是否是初始化动画的布尔值]
//            onExit 、onExiting、onExited退出时的事件[此类事件只有一个参数]





class Animationc extends React.Component{
    constructor(){
      super();
      this.state={
            num:123 ,
            aColor:'#a20ddf',
            animationKey:true
      }
      
    }

    render(){
      return (
            <>
                <p className="p1"> 动画演示 </p>
                <CSSTransition in={this.state.animationKey} classNames='box' timeout={3000}unmountOnExit={true}appear >
                  <div></div>
                </CSSTransition>
                <button onClick={()=>{this.mk()}} >触发</button>
            </>
      );
    }

    mk(){
       this.setState({
            animationKey: !this.state.animationKey
       })
    }

    tmp2(){
      // 解析

    }
   
}



export default Animationc;
页: [1]
查看完整版本: React自带的动画 react-transition-group 之 CSSTransition