国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React Transition Group -- CSSTransition 組件

lbool / 536人閱讀

摘要：導(dǎo)語上一篇文章給大家簡(jiǎn)單演示了組件，今天給大家介紹一下的第二個(gè)組件組件。在組件淡入，進(jìn)場(chǎng)出場(chǎng)時(shí)，組件應(yīng)用了一系列名來對(duì)這些動(dòng)作進(jìn)行描述。在動(dòng)畫完成后，原改變?yōu)楸砻鹘M件動(dòng)畫已經(jīng)應(yīng)用完成并加載完成。組件的回調(diào)函數(shù)，當(dāng)組件或時(shí)會(huì)立即調(diào)用。

導(dǎo)語

上一篇文章給大家簡(jiǎn)單演示了 Transition組件，今天給大家介紹一下 React Transition Group 的第二個(gè)組件：CSSTransition 組件。

CSSTransition

此Transition組件用于CSS動(dòng)畫過渡，靈感來源于ng-animate庫(kù)。

CSSTransition：在組件淡入appear，進(jìn)場(chǎng)enter,出場(chǎng)exit時(shí)，CSSTransition組件應(yīng)用了一系列className名來對(duì)這些動(dòng)作進(jìn)行描述。首先appear被應(yīng)用到組件className上，接著添加“active”類名來激活CSS動(dòng)畫。在動(dòng)畫完成后，原class改變?yōu)閐one表明組件動(dòng)畫已經(jīng)應(yīng)用完成并加載完成。

當(dāng)組件的in屬性變?yōu)閠rue時(shí)，組件的className將被賦值為example-enter，并在下一刻添加example-enter-active的CSS class名。這些都是基于className屬性的約定。即：原組件帶有className="animate-rotate"，則enter狀態(tài)時(shí)，變?yōu)?animate-rotate-enter"。

看完了基本介紹，下面來一個(gè)最基本的例子：

第一步：引入文件

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

第二步：定義CSSTransition 組件的一些屬性以及類的state

state = {
        show: true
    }

第三步：編寫內(nèi)部組件以及一些樣式

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

第四步：根據(jù)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

控制組件應(yīng)用動(dòng)畫的屬性值，通常將一個(gè)react的組件state賦值給它，通過改變state，從而開啟和關(guān)閉動(dòng)畫

type: boolean
default: false

classNames

classNames[注意帶s]屬性用于當(dāng)組件被應(yīng)用動(dòng)畫時(shí)，不同的動(dòng)畫狀態(tài)（enter,exits,done）將作為className屬性的后綴來拼接為新的className，如：
className="fade"會(huì)被應(yīng)用為fade-enter,fade-enter-active,fade-enter-done,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及fade-appear-active.每一個(gè)獨(dú)立的className都對(duì)應(yīng)著多帶帶的狀態(tài)。

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

onEnter

組件的回調(diào)函數(shù)，當(dāng)組件enter或appear時(shí)會(huì)立即調(diào)用。

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

onEntering

也是一個(gè)過渡組件的回調(diào)函數(shù)，當(dāng)組件enter-active或appear-active時(shí)，立即調(diào)用此函數(shù)

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

onEntered

同樣是回調(diào)函數(shù)，當(dāng)組件的enter,appearclassName被移除時(shí)，意即調(diào)用此函數(shù)

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

onExit

當(dāng)組件應(yīng)用exit類名時(shí)，調(diào)用此函數(shù)

type: Function(node: HtmlElement)

onExiting

當(dāng)組件應(yīng)用exit-active類名時(shí)，調(diào)用此函數(shù)

type: Function(node: HtmlElement)

onExited

當(dāng)組件exit類名被移除，且添加了exit-done類名時(shí)，調(diào)用此函數(shù)

type: Function(node: HtmlElement)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101585.html

相關(guān)文章

  • react 官網(wǎng)動(dòng)畫庫(kù)（react-transition-group）的新寫法

    摘要：一一個(gè)官網(wǎng)提供的動(dòng)畫過度庫(kù)。安裝而官方提供的三個(gè)組建。下面來看一個(gè)例子效果是增加和刪除列表項(xiàng)中的一個(gè)，產(chǎn)生漸入漸失的效果說白了也就是多個(gè)或者組合的效果。 一、react-transition-group 一個(gè)官網(wǎng)提供的動(dòng)畫過度庫(kù)。 搜索了網(wǎng)上關(guān)于react動(dòng)畫的，很多的答案都是很久以前的了老版本了，而現(xiàn)在官方提供的是叫react-transition-group 它是以前兩個(gè)的合體版本...

    ky0ncheng 評(píng)論0 收藏0

  • React Transition Group -- Transition 組件

    摘要：安裝官方提供三個(gè)組件，分別為。這一章主要介紹下組件。默認(rèn)情況下，子組件在達(dá)到退出狀態(tài)后仍然掛載。注意沒有特定的顯示狀態(tài)。啟用或禁用轉(zhuǎn)換。注意如果提供超時(shí)，仍將其用作回退。 導(dǎo)語 新的一年，換了新的工作也算是新的開始吧，最近對(duì)頁面的切換動(dòng)畫比較感興趣，所以就以React Transition Group庫(kù)為切入口做一些深入的理解吧。 安裝 # npm npm install react-...

    Airmusic 評(píng)論0 收藏0

  • React Transition Group -- TransitionGroup 組件

    導(dǎo)語 Transition組件CSSTransition組件 該庫(kù)的前兩個(gè)基本組件可以查看以上鏈接

    Little_XM 評(píng)論0 收藏0

  • react-transition-group動(dòng)畫庫(kù)Transition組件使用

    摘要：動(dòng)畫庫(kù)這個(gè)庫(kù)包括個(gè)組件，今天做項(xiàng)目剛好用到了組件，記錄一下使用過程中的總結(jié)，另外兩個(gè)組件用到了再做介紹。規(guī)定完成過渡效果需要多少秒或毫秒。規(guī)定速度效果的速度曲線。參考網(wǎng)址官方案例官網(wǎng)動(dòng)畫庫(kù)的新寫法 react-transition-group動(dòng)畫庫(kù) 這個(gè)庫(kù)包括3個(gè)組件：Transition,CSSTransition,TransitonGroup，今天做項(xiàng)目剛好用到了Transitio...

    charles_paul 評(píng)論0 收藏0

  • react-transition-group動(dòng)畫庫(kù)Transition組件使用

    摘要：動(dòng)畫庫(kù)這個(gè)庫(kù)包括個(gè)組件，今天做項(xiàng)目剛好用到了組件，記錄一下使用過程中的總結(jié)，另外兩個(gè)組件用到了再做介紹。規(guī)定完成過渡效果需要多少秒或毫秒。規(guī)定速度效果的速度曲線。參考網(wǎng)址官方案例官網(wǎng)動(dòng)畫庫(kù)的新寫法 react-transition-group動(dòng)畫庫(kù) 這個(gè)庫(kù)包括3個(gè)組件：Transition,CSSTransition,TransitonGroup，今天做項(xiàng)目剛好用到了Transitio...

    gityuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<