zoukankan      html  css  js  c++  java
  • 【React自制全家桶】八、React动画以及react-transition-group动画库的使用

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

    1、transition(CSS3自带)

    2、animation(CSS3自带)

    3、react-transition-group动画库(需要引入插件)

     

    一、transition(CSS3自带)

    1、用法示例:

    .hide{
      /*过渡动画效果*/
     opacity: 1; transition: all 1s ease-in; }

     含义:透明度在1s内从0渐变为1

    2、transition其他参数

    建议参考(http://www.runoob.com/cssref/css3-pr-transition.html)详细学习

    transition-property 指定CSS属性的name,transition效果
    transition-duration transition效果需要指定多少秒或毫秒才能完成
    transition-timing-function 指定transition效果的转速曲线
    transition-delay 定义transition效果开始的时候

    3、区别transform

    transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。所以,transform属性只对元素进行变换,不会产生过渡效果。

    建议参考(http://www.runoob.com/cssref/css3-pr-transform.html)详细学习

     

    二、animation(CSS3自带)

    1、用法示例:

    .hide{
      /*过渡动画效果*/
      animation: animation-name 2s ease-in forwards;
    }
    @keyframes animation-name {
      0% {
        opacity: 1;
        color: red;
      }
      50% {
        opacity: 0.5;
        color: blue;
      }
      100%{
        opacity: 0;
        color: yellow;
      }
    }
    

     animation相对于transition的好处是可以一帧一帧的控制动画,自由度更高。

    三、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;
    }
    

     大家动手试试吧

  • 相关阅读:
    JS BOM对象 History对象 Location对象
    JS 字符串对象 数组对象 函数对象 函数作用域
    JS 引入方式 基本数据类型 运算符 控制语句 循环 异常
    Pycharm Html CSS JS 快捷方式创建元素
    CSS 内外边距 float positio属性
    CSS 颜色 字体 背景 文本 边框 列表 display属性
    【Android】RxJava的使用(三)转换——map、flatMap
    【Android】RxJava的使用(二)Action
    【Android】RxJava的使用(一)基本用法
    【Android】Retrofit 2.0 的使用
  • 原文地址:https://www.cnblogs.com/piaobodewu/p/9410912.html
Copyright © 2011-2022 走看看