React Transition Group -- CSSTransition 組件

lbool 發布于2019-08-23 15:09 / 543人閱讀

摘要：導語上一篇文章給大家簡單演示了組件，今天給大家介紹一下的第二個組件組件。在組件淡入，進場出場時，組件應用了一系列名來對這些動作進行描述。在動畫完成后，原改變為表明組件動畫已經應用完成并加載完成。組件的回調函數，當組件或時會立即調用。

導語

上一篇文章給大家簡單演示了 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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