React Transition Group -- CSSTransition 组件

lbool 发布于2019-08-23 15:09 / 540人阅读

摘要：导语上一篇文章给大家简单演示了组件，今天给大家介绍一下的第二个组件组件。在组件淡入，进场出场时，组件应用了一系列名来对这些动作进行描述。在动画完成后，原改变为表明组件动画已经应用完成并加载完成。组件的回调函数，当组件或时会立即调用。

导语

上一篇文章给大家简单演示了 Transition组件，今天给大家介绍一下 React Transition Group 的第二个组件：CSSTransition 组件。

CSSTransition

此Transition组件用于CSS动画过渡，灵感来源于ng-animate库。

CSSTransition：在组件淡入appear，进场enter,出场exit时，CSSTransition组件应用了一系列className名来对这些动作进行描述。首先appear被应用到组件className上，接着添加“active”类名来激活CSS动画。在动画完成后，原class改变为done表明组件动画已经应用完成并加载完成。

当组件的in属性变为true时，组件的className将被赋值为example-enter，并在下一刻添加example-enter-active的CSS class名。这些都是基于className属性的约定。即：原组件带有className="animate-rotate"，则enter状态时，变为"animate-rotate-enter"。

看完了基本介绍，下面来一个最基本的例子：

第一步：引入文件

import React,{ Component } from "react"
import CSSTransition from "react-transition-group/CSSTransition"
import "./css/index.css"

第二步：定义CSSTransition 组件的一些属性以及类的state

state = {
        show: true
    }

第三步：编写内部组件以及一些样式

this.setState(state=>({show: !state.show}))}> 
    show 


//index.css
.circle {
    margin: 2px;
    width: 50px;
    height: 50px;
    position: absolute;
    display: inline-block;
    left: 100px;
    box-shadow: 0px 1px 2px #999;
    text-shadow: 0px 1px 2px #999;
    line-height: 80px;
    text-align: center;
    color: white;
    font-size: 10px;
}

第四步：根据CSSTransition 配置的ClassNames属性编写css样式

//index.css
.show-enter {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
  }
.show-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0%);
    transition: all 300ms ease-out;
}
.show-exit {
    opacity: 1;
    transform: scale(1) translateY(0%);
}
.show-exit-active {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
}

效果图：

完整代码

//index.js
import React,{ Component } from "react"
import CSSTransition from "react-transition-group/CSSTransition"
import "./css/index.css"

export default class App extends Component {

    state = {
        show: true
    }

    render () {
        return (
            
                {state => {
                    // console.log(state)
                    return (
                        this.setState(state=>({show: !state.show}))}> 
                            show 
                        
                    )
                }}
            
        )
    }
}

//index.css
.circle {
    margin: 2px;
    width: 50px;
    height: 50px;
    position: absolute;
    display: inline-block;
    left: 100px;
    box-shadow: 0px 1px 2px #999;
    text-shadow: 0px 1px 2px #999;
    line-height: 80px;
    text-align: center;
    color: white;
    font-size: 10px;
}

.show-enter {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
  }
.show-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0%);
    transition: all 300ms ease-out;
}
.show-exit {
    opacity: 1;
    transform: scale(1) translateY(0%);
}
.show-exit-active {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
}

Props in

控制组件应用动画的属性值，通常将一个react的组件state赋值给它，通过改变state，从而开启和关闭动画

type: boolean
default: false

classNames

classNames[注意带s]属性用于当组件被应用动画时，不同的动画状态（enter,exits,done）将作为className属性的后缀来拼接为新的className，如：
className="fade"会被应用为fade-enter,fade-enter-active,fade-enter-done,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及fade-appear-active.每一个独立的className都对应着多带带的状态。

type: string | { appear?: string, appearActive?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }

onEnter

组件的回调函数，当组件enter或appear时会立即调用。

type: Function(node: HtmlElement, isAppearing: bool)

onEntering

也是一个过渡组件的回调函数，当组件enter-active或appear-active时，立即调用此函数

type: Function(node: HtmlElement, isAppearing: bool)

onEntered

同样是回调函数，当组件的enter,appearclassName被移除时，意即调用此函数

type: Function(node: HtmlElement, isAppearing: bool)

onExit

当组件应用exit类名时，调用此函数

type: Function(node: HtmlElement)

onExiting

当组件应用exit-active类名时，调用此函数

type: Function(node: HtmlElement)

onExited

当组件exit类名被移除，且添加了exit-done类名时，调用此函数

type: Function(node: HtmlElement)

云服务器 GPU云服务器 CSSTransition -transition Transition CAMERA_TRANSITION_CO

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101585.html

react 官网动画库（react-transition-group）的新写法

摘要：一一个官网提供的动画过度库。安装而官方提供的三个组建。下面来看一个例子效果是增加和删除列表项中的一个，产生渐入渐失的效果说白了也就是多个或者组合的效果。一、react-transition-group 一个官网提供的动画过度库。搜索了网上关于react动画的，很多的答案都是很久以前的了老版本了，而现在官方提供的是叫react-transition-group 它是以前两个的合体版本...

ky0ncheng 2019-08-22 18:30 评论0 收藏0
React Transition Group -- Transition 组件

摘要：安装官方提供三个组件，分别为。这一章主要介绍下组件。默认情况下，子组件在达到退出状态后仍然挂载。注意没有特定的显示状态。启用或禁用转换。注意如果提供超时，仍将其用作回退。导语新的一年，换了新的工作也算是新的开始吧，最近对页面的切换动画比较感兴趣，所以就以React Transition Group库为切入口做一些深入的理解吧。安装 # npm npm install react-...

Airmusic 2019-08-23 15:08 评论0 收藏0
React Transition Group -- TransitionGroup 组件

导语 Transition组件CSSTransition组件该库的前两个基本组件可以查看以上链接

Little_XM 2019-08-23 15:09 评论0 收藏0
react-transition-group动画库Transition组件使用

摘要：动画库这个库包括个组件，今天做项目刚好用到了组件，记录一下使用过程中的总结，另外两个组件用到了再做介绍。规定完成过渡效果需要多少秒或毫秒。规定速度效果的速度曲线。参考网址官方案例官网动画库的新写法 react-transition-group动画库这个库包括3个组件：Transition,CSSTransition,TransitonGroup，今天做项目刚好用到了Transitio...

charles_paul 2019-08-23 17:15 评论0 收藏0
react-transition-group动画库Transition组件使用

摘要：动画库这个库包括个组件，今天做项目刚好用到了组件，记录一下使用过程中的总结，另外两个组件用到了再做介绍。规定完成过渡效果需要多少秒或毫秒。规定速度效果的速度曲线。参考网址官方案例官网动画库的新写法 react-transition-group动画库这个库包括3个组件：Transition,CSSTransition,TransitonGroup，今天做项目刚好用到了Transitio...

gityuan 2019-08-29 18:45 评论0 收藏0