react-transition-group小结

在vue中想要实现动画效果，Vue 提供了 transition 的封装组件。通过过渡类名来实现过渡效果，react虽然没有封装组件，但他的生态圈也足够大，react-transition-group可以帮我们实现动画效果，原理差不多。上手也很简单。

// 首先安装
# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

 

import React,{Component} from 'react';
import './style.css'
import { CSSTransition,TransitionGroup } from 'react-transition-group';
import uuid from 'uuid'

react-transition-group有三种组件 Transition CSSTransition TransitionGroup Transition是把css样式融入js来写，使用重点介绍后面两种

CSSTransition

元素组件的显示和隐藏

注意： 使用时保证组件同时存在，利用in属性控制组件的显示和隐藏。所以当我们在路由组件中想要使用动画时，不能在外包Switch，因为使用Switch一次只会出现一个组件，同时Route的属性不能用component 要用 children，再利用in来判断出不出现该组件。并给CSSTransition加上onmountExit = {true} mountEnter = {true}

class Example extends Component {
    constructor (props) {
        super(props)
        this.state = {
            isShow : true
        }
    }
    render() {
        let {isShow} = this.state
        return(
            

            
            {   // 写成一个函数时 可以接受状态
                //  一共有四个状态 entering, entered, exiting, exited
                (state) => (
Hello World -- {state}
)
            }
            {console.log(this.state.isShow)}
             this.setState({isShow : !this.state.isShow})} >toggle
            
            
        )
    }

}

TransitionGrop

针对的是列表元素的新增和删除的动画

class Example extends Component {
    state = {
        isShow: true,
        items: [
            {id: uuid(), text: 'Hello World'},
            {id: uuid(), text: 'Hello React'},
        ]
    }
    render() {
        let {isShow} = this.state
        return(
            

                
                    {
                        this.state.items.map(item => {
                            return (
                                
                                {
                                    (state) => (
{item.text} -- {state}
)
                                }
                                
                            )
                        })
                    }
                
                {
                    this.setState(preState=>{
                        preState.items = [...preState.items,{id: uuid(), text: 'Hello Transition'}]
                        return preState     
                    })
                }}>add
            
        )
    }

}

附：css样式

.msg-enter,.msg-appear {
    opacity: 0;
}
.msg-enter-active,.msg-appear-active {
    opacity: 1;
    transition: all 300ms ease-out;
}
.msg-enter-done {
    opacity: 1;
}
.msg-exit {
    opacity: 1;
}
.msg-exit-active {
    opacity: 0;
    transition: all 300ms ease-out;
}
.msg-exit-done {
    opacity: 0;
}