亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

React Transition Group -- Transition 組件

Airmusic / 2240人閱讀

摘要：安裝官方提供三個(gè)組件，分別為。這一章主要介紹下組件。默認(rèn)情況下，子組件在達(dá)到退出狀態(tài)后仍然掛載。注意沒(méi)有特定的顯示狀態(tài)。啟用或禁用轉(zhuǎn)換。注意如果提供超時(shí)，仍將其用作回退。

導(dǎo)語(yǔ)

新的一年，換了新的工作也算是新的開(kāi)始吧，最近對(duì)頁(yè)面的切換動(dòng)畫(huà)比較感興趣，所以就以React Transition Group庫(kù)為切入口做一些深入的理解吧。

安裝 
# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

官方提供三個(gè)組件，分別為 Transition, CSSTransition, TransitonGroup。
這一章主要介紹下 Transition 組件。

Transition

Transition 組件允許您使用簡(jiǎn)單的聲明性API描述從一個(gè)組件狀態(tài)到另一個(gè)組件狀態(tài)的轉(zhuǎn)換。最常見(jiàn)的是，它用于動(dòng)畫(huà)組件的安裝和卸載，但也可以用于描述就地的過(guò)渡狀態(tài)。

默認(rèn)情況下，轉(zhuǎn)換組件不改變它呈現(xiàn)的組件的行為，它只跟蹤組件的“進(jìn)入”和“退出”狀態(tài)。由你來(lái)賦予這些狀態(tài)意義和效果。例如，我們可以在組件進(jìn)入或退出時(shí)向其添加樣式。

如前所述，轉(zhuǎn)換組件本身不會(huì)對(duì)其子組件執(zhí)行任何操作。它所做的是隨時(shí)間跟蹤轉(zhuǎn)換狀態(tài)，以便在組件更改狀態(tài)時(shí)更新組件(例如通過(guò)添加樣式或類(lèi))。

在一個(gè)過(guò)渡中有四種主要狀態(tài):

entering

entered

exiting

exited

過(guò)渡狀態(tài)通過(guò)in屬性切換。當(dāng)為true時(shí)，組件開(kāi)始“Enter”階段。在此階段中，組件將從當(dāng)前轉(zhuǎn)換狀態(tài)轉(zhuǎn)移到轉(zhuǎn)換期間的“進(jìn)入”狀態(tài)，然后在完成轉(zhuǎn)換后再轉(zhuǎn)移到“進(jìn)入”狀態(tài)。

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

首先，創(chuàng)建我們的 Fade 組件

第一步：定義屬性

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
    entering: { opacity: 0 },
    entered:  { opacity: 1 },
}

第二步：定義組件

const Fade = (props) => (
    
        {(state) => (
            

                {props.children}
            

        )}
    
)

Transition 組件的 in 屬性是一個(gè) boolean 值，由子組件傳入，用于控制子組件的狀態(tài)，是否顯示。
我們的 Fade 組件創(chuàng)建好了，接下來(lái)就該試試好不好用了，我們創(chuàng)建一個(gè)新的組件，定義一些簡(jiǎn)單的樣式，定義一個(gè)內(nèi)部狀態(tài)show，傳入Fade 組件，然后使用 Fade 組件包裹它。

export default class App extends Component {

    state = {
        show: true
    }

    render () {
        const circle = {
            margin: 2,
            width: 100,
            height: 100,
            position: "absolute",
            display: "inline-block",
            left: 100,
            boxShadow: "0px 1px 2px #999",
            textShadow: "0px 1px 2px #999",
            lineHeight: "100px",
            textAlign: "center",
            color: "white",
            fontSize: 10,
        }
        return (
            
                
this.setState(state=>({show: !state.show}))}>
                    Show
                

            
        )
    }
}
效果圖：

Props

我們來(lái)看看 Trasition 組件的其它常用屬性。

children

可以使用一個(gè)函數(shù)來(lái)代替 React 元素，通過(guò)調(diào)用這個(gè)函數(shù)與當(dāng)前過(guò)渡狀態(tài)(‘enter’、‘enter’、‘exit’、‘exited’、‘unmount’),可用于將特定于上下文的props應(yīng)用于組件。

type: Function | element
required

in

用于顯示組件;觸發(fā)進(jìn)入或退出狀態(tài)

type: boolean
default: false

mountOnEnter

默認(rèn)情況下，子組件與父轉(zhuǎn)換組件一起立即掛載。如果你想“延遲掛載”第一個(gè)in={true}上的組件，你可以設(shè)置mountOnEnter。在第一次進(jìn)入轉(zhuǎn)換之后，組件將保持掛載狀態(tài)，即使在“退出”狀態(tài)下也是如此，除非你還指定unmountOnExit。

type: boolean
default: false

unmountOnExit

默認(rèn)情況下，子組件在達(dá)到“退出”狀態(tài)后仍然掛載。如果你希望在組件退出后卸載組件，請(qǐng)?jiān)O(shè)置unmountOnExit。

type: boolean
default: false

appear

通常，如果組件掛載時(shí)顯示組件，則該組件不進(jìn)行轉(zhuǎn)換。如果您希望在第一個(gè)掛載集上進(jìn)行轉(zhuǎn)換，則顯示為true，并且組件將在< transition >掛載后立即進(jìn)行轉(zhuǎn)換。
注意:沒(méi)有特定的“顯示”狀態(tài)。appear只添加一個(gè)額外的enter轉(zhuǎn)換。

type: boolean
default: false

enter

啟用或禁用enter轉(zhuǎn)換。

type: boolean
default: true

exit

啟用或禁用exit轉(zhuǎn)換。

type: boolean
default: true

timeout

轉(zhuǎn)換的持續(xù)時(shí)間，單位為毫秒。

timeout={{
 enter: 300,
 exit: 500,
}}

type: number | { enter?: number, exit?: number }

addEndListener

添加自定義轉(zhuǎn)換結(jié)束觸發(fā)器。使用正在轉(zhuǎn)換的DOM節(jié)點(diǎn)和done回調(diào)調(diào)用。允許更細(xì)粒度的轉(zhuǎn)換結(jié)束邏輯。注意:如果提供超時(shí)，仍將其用作回退。

addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener("transitionend", done, false);
}}

type: Function

onEnter

在應(yīng)用“輸入”狀態(tài)之前觸發(fā)的回調(diào)。提供了一個(gè)額外的參數(shù)isAppearing，以指示是否在初始掛載上出現(xiàn)了enter階段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onEntering

在應(yīng)用“輸入”狀態(tài)之前觸發(fā)的回調(diào)。提供了一個(gè)額外的參數(shù)isAppearing，以指示是否在初始掛載上出現(xiàn)了entering階段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onEntered

在應(yīng)用“輸入”狀態(tài)之前觸發(fā)的回調(diào)。提供了一個(gè)額外的參數(shù)isAppearing，以指示是否在初始掛載上出現(xiàn)了entered階段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onExit

在應(yīng)用“退出”狀態(tài)之前觸發(fā)的回調(diào)。

type: Function(node: HtmlElement) -> void
default: function noop() {}

onExiting

在應(yīng)用“退出”狀態(tài)之后觸發(fā)的回調(diào)。

type: Function(node: HtmlElement) -> void
default: function noop() {}

onExited

應(yīng)用“退出”狀態(tài)后觸發(fā)的回調(diào)。

type: Function(node: HtmlElement) -> void
default: function noop() {}

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101562.html

相關(guān)文章

  • 讓React應(yīng)用“動(dòng)”起來(lái)

    摘要：因?yàn)槠浣M件只是根據(jù)提供的及屬性，生成動(dòng)畫(huà)的數(shù)據(jù)，業(yè)務(wù)應(yīng)用中拿到生成的數(shù)據(jù)后根據(jù)需要添加需要?jiǎng)赢?huà)的組件樣式。除了上述簡(jiǎn)單的動(dòng)畫(huà)應(yīng)用，在復(fù)雜動(dòng)畫(huà)的實(shí)現(xiàn)方面，表現(xiàn)非常優(yōu)越。 WEB應(yīng)用中動(dòng)畫(huà)很重要 不管是web應(yīng)用還是原生應(yīng)用，也不論是PC端應(yīng)用還是移動(dòng)端應(yīng)用，動(dòng)畫(huà)都扮演了一個(gè)重要的角色。 盡管動(dòng)畫(huà)并不會(huì)添加應(yīng)用的實(shí)際動(dòng)能，但一個(gè)好的動(dòng)畫(huà)，一個(gè)流暢且優(yōu)雅，選擇在恰當(dāng)時(shí)機(jī)出現(xiàn)的動(dòng)畫(huà)，能為應(yīng)用增...

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

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

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

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

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

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

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

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

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

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

  • React Transition Group -- CSSTransition 組件

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

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

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

0條評(píng)論

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