SwitchTransition 与 TransitionGroup 动画

周大胖子

import React from "react";
import { CSSTransition, SwitchTransition, TransitionGroup } 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 onEntering  onEntered 进入类事件[此类事件具有两个参数，第二个参数是判断是否是初始化动画的布尔值]
//              onExit 、onExiting、onExited  退出时的事件[此类事件只有一个参数]  



//  SwitchTransition  [用于元素或者组件的切换动画]
//  SwitchTransition组件里面 要有CSSTransition 或者 Transition 组件，不能直接包裹需要动画的组件或元素
//  SwitchTransition 里面的CSSTransition 不再接收in 来判断  而是接收 key属性来判断执行


class Animationc extends React.Component {
    constructor() {
        super();
        this.state = {
            num: 123,
            aColor: '#a20ddf',
            animationKey: true,
            switchKey: false,
            youArr: ['老王', "老张", "老李"]
        }

    }

    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>
                <hr />
                <SwitchTransition mode={"in-out"}>
                    <CSSTransition key={this.state.switchKey} classNames='btn' timeout={1000}   >
                        <button className="btn2" onClick={() => { this.tmp2() }} > 切换SwitchTransition 演示 {this.state.switchKey} </button>
                    </CSSTransition>

                </SwitchTransition>
                {/* 无论是SwitchTransition 还是 TransitionGroup 在使用时 CSSTransition都必须是 他的直接子元素 */}
                {/*TransitionGroup 在使用时  里面的 CSSTransition 的KEY值不能重复 ，如果重复会覆盖不显示*/}
               
                    <ul>
                        <TransitionGroup>
                        {
                            this.state.youArr.map((v, index) => {
                                return (
                                    <CSSTransition key={v} classNames='li' timeout={3000} unmountOnExit={true} >
                                        <li onClick={() => { this.removeYouArr(index)  }}> {v} </li>
                                    </CSSTransition>
                                )
                                

                            })
                        }
                        </TransitionGroup>
                    </ul>
               
                <button onClick={() => {
                    this.addYouArr();
                }}>加油</button>
            </>
        );
    }

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

    tmp2() {
        console.log(this.state.switchKey)
        this.setState({
            switchKey: !this.state.switchKey
        })

    }

    removeYouArr(index) {
        console.log(index)
        // filter 过滤数组用的函数 里面是过滤条件 返回值是新的条件的数组
        let list = this.state.youArr.filter((v, k) => {
            return k !== index;
        })
        this.setState({
            youArr: list
        })

    }

    addYouArr() {
        this.setState({
            youArr: [...this.state.youArr, '王三岁']
        })
    }

}



export default Animationc;