React动画库之react-transition-group（入场enter、出场exit、初始化appear）

React动画通常有三种方法实现从易到难为：

1、transition（CSS3自带）

2、animation（CSS3自带）

3、react-transition-group动画库（需要引入插件）

react生态圈十分庞大，类似于动画库有很多，这里我们介绍一款react-transition-group.

1、官方推出的动画库
2、动画效果十分丰富灵活

1、安裝

2、基本庫

3、引入使用（这里我们从CSSTransition开始）

　　首先引入

　　接下来因为要用CSSTransition，所以之前引入的便不再需要

　　如下所示

　　初始化、入场、出场动画阶段

.xxx-appear{} 初始化动画开始
.xxx-appear-active{} 初始化动画状态表现
    注意：初始化动画需要设置appear={true}

.xxx-enter{}入场动画开始
.xxx-enter-active{}入场动画状态表现
.xxx-enter-done{}入场动画结束

.xxx-exit{}出场动画开始
.xxx-exit-active{}出场动画表现
.xxx-exit-done{}出场动画结束

　　Props属性列表：

in表示开关
timeout为持续时间
classNames为类名，区别于ES6的class和JSX的className

　　接下来编写央视，首先需要了解过渡阶段。与Vue动画类似

　　接下来依次替换

　　这样看来跟纯CSS的效果差不多，但这里注意，它可以实现很多其他功能，例如“退场动画结束后销毁节点，直接从代码去除”.

　　此外，还有入场&&出场动画钩子

　　测试如下

4、初始化动画appear（译为显露）

　　以上便是入场和出场动画，此外，还有初始化动画appear

　　初始化动画可以单独设置，也可以和入场动画一起设置

其他參考文章：

react-transition-group动画库（需要引入插件）

1、为什么要用react-transition-group？

因为有一些动画用animation和transition很难实现甚至不能实现，这时react-transition-group就非常必要啦

2、安装react-transition-group库

yarn add react-transition-group

3、官方文档地址：http://reactcommunity.org/react-transition-group/（强烈建议一定要先打开这个文档再继续向下阅读哦）

react-transition-group库有三个可使用的组件：

（1）主要使用CSSTransition（单标签的动画）和TransitionGroup（多标签的动画）

（2）Transition是更接近底层的动画，当时用CSSTransition和TransitionGroup都不能实现需要的动画时可以考虑使用Transition

4、React使用示例：（核心部分均标蓝）

js部分：

import React,{ Component , Fragment} from 'react';
// 引入react-transition-group动画组件
import { CSSTransition,TransitionGroup } from 'react-transition-group';
class AppTra extends Component{
    constructor(props){
        super(props);
        this.state = {
            list:[]
        };
        this.handleAddItem = this.handleAddItem.bind(this);
    }
 
    handleAddItem(){
        this.setState((prevState)=>{
            return{
                list: [...prevState.list,'666']
            }
        })
    }
 
 
    render(){
        return (
            // Fragment是占位符
            <Fragment>
                <TransitionGroup>
                {
 
                        this.state.list.map((item,index)=>{
                            return(
                                <CSSTransition
                                    in={this.state.show}
                                    //动画时间
                                    timeout={1000}
                                    // 前缀名注意S
                                    classNames='fade'
                                    unmountOnExit
                                    onEntered={(el)=>{
                                    el.style.color='blue'
                                    }}
                                    // 入场第一帧
                                    appear={true}
 
                                    key={index}
                                >
                                    <div>{item}</div>
                                </CSSTransition>
                            )
                        })
                }
                <button onClick={this.handleAddItem}>toggle</button>
                </TransitionGroup>
            </Fragment>
        )
    }
}
 
// 导出组件
export default AppTra

　　css部分：

/*入场动画*/
.fade-enter, .fade-appear{
    /*入场动画执行的第一个时刻*/
    opacity: 0;
}
 
.fade-enter-active, .fade-appear-active{
    /*入场动画执行的第二个瞬间一直到执行完成的时刻*/
    opacity: 1;
    transition: opacity 1s ease-in;
}
 
.fade-enter-done{
    /*入场动画执行完成之后*/
    opacity: 1;
    color: red;
}
 
 
/*出场动画*/
.fade-exit{
    opacity: 1;
}
 
.fade-exit-active{
    opacity: 0;
    transition: opacity 1s ease-in;
}
 
.fade-exit-done{
    opacity: 0;
}

posted @ 2020-03-11 21:31 剑仙6 阅读(1569) 评论(0) 收藏举报

刷新页面返回顶部

剑仙6

React动画库之react-transition-group（入场enter、出场exit、初始化appear）

公告