React Transition Group -- Transition 組件

Airmusic 發布于2019-08-23 15:08 / 2164人閱讀

摘要：安裝官方提供三個組件，分別為。這一章主要介紹下組件。默認情況下，子組件在達到退出狀態后仍然掛載。注意沒有特定的顯示狀態。啟用或禁用轉換。注意如果提供超時，仍將其用作回退。

導語

新的一年，換了新的工作也算是新的開始吧，最近對頁面的切換動畫比較感興趣，所以就以React Transition Group庫為切入口做一些深入的理解吧。

安裝

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

# yarn
yarn add react-transition-group

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

Transition

Transition 組件允許您使用簡單的聲明性API描述從一個組件狀態到另一個組件狀態的轉換。最常見的是，它用于動畫組件的安裝和卸載，但也可以用于描述就地的過渡狀態。

默認情況下，轉換組件不改變它呈現的組件的行為，它只跟蹤組件的“進入”和“退出”狀態。由你來賦予這些狀態意義和效果。例如，我們可以在組件進入或退出時向其添加樣式。

如前所述，轉換組件本身不會對其子組件執行任何操作。它所做的是隨時間跟蹤轉換狀態，以便在組件更改狀態時更新組件(例如通過添加樣式或類)。

在一個過渡中有四種主要狀態:

entering

entered

exiting

exited

過渡狀態通過in屬性切換。當為true時，組件開始“Enter”階段。在此階段中，組件將從當前轉換狀態轉移到轉換期間的“進入”狀態，然后在完成轉換后再轉移到“進入”狀態。

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

首先，創建我們的 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 屬性是一個 boolean 值，由子組件傳入，用于控制子組件的狀態，是否顯示。
我們的 Fade 組件創建好了，接下來就該試試好不好用了，我們創建一個新的組件，定義一些簡單的樣式，定義一個內部狀態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

我們來看看 Trasition 組件的其它常用屬性。

children

可以使用一個函數來代替 React 元素，通過調用這個函數與當前過渡狀態(‘enter’、‘enter’、‘exit’、‘exited’、‘unmount’),可用于將特定于上下文的props應用于組件。

type: Function | element
required

用于顯示組件;觸發進入或退出狀態

type: boolean
default: false

mountOnEnter

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

type: boolean
default: false

unmountOnExit

默認情況下，子組件在達到“退出”狀態后仍然掛載。如果你希望在組件退出后卸載組件，請設置unmountOnExit。

type: boolean
default: false

appear

通常，如果組件掛載時顯示組件，則該組件不進行轉換。如果您希望在第一個掛載集上進行轉換，則顯示為true，并且組件將在< transition >掛載后立即進行轉換。
注意:沒有特定的“顯示”狀態。appear只添加一個額外的enter轉換。

type: boolean
default: false

enter

啟用或禁用enter轉換。

type: boolean
default: true

exit

啟用或禁用exit轉換。

type: boolean
default: true

timeout

轉換的持續時間，單位為毫秒。

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

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

addEndListener

添加自定義轉換結束觸發器。使用正在轉換的DOM節點和done回調調用。允許更細粒度的轉換結束邏輯。注意:如果提供超時，仍將其用作回退。

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

type: Function

onEnter

在應用“輸入”狀態之前觸發的回調。提供了一個額外的參數isAppearing，以指示是否在初始掛載上出現了enter階段。

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

onEntering

在應用“輸入”狀態之前觸發的回調。提供了一個額外的參數isAppearing，以指示是否在初始掛載上出現了entering階段。

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

onEntered

在應用“輸入”狀態之前觸發的回調。提供了一個額外的參數isAppearing，以指示是否在初始掛載上出現了entered階段。

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

onExit

在應用“退出”狀態之前觸發的回調。

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

onExiting

在應用“退出”狀態之后觸發的回調。

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

onExited

應用“退出”狀態后觸發的回調。

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

云服務器 GPU云服務器 -transition Transition CAMERA_TRANSITION_CO Group

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101562.html

讓React應用“動”起來

摘要：因為其組件只是根據提供的及屬性，生成動畫的數據，業務應用中拿到生成的數據后根據需要添加需要動畫的組件樣式。除了上述簡單的動畫應用，在復雜動畫的實現方面，表現非常優越。 WEB應用中動畫很重要不管是web應用還是原生應用，也不論是PC端應用還是移動端應用，動畫都扮演了一個重要的角色。盡管動畫并不會添加應用的實際動能，但一個好的動畫，一個流暢且優雅，選擇在恰當時機出現的動畫，能為應用增...

xiyang 2019-08-22 16:47 評論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
react 官網動畫庫（react-transition-group）的新寫法

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

ky0ncheng 2019-08-22 18:30 評論0 收藏0
React Transition Group -- CSSTransition 組件

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

lbool 2019-08-23 15:09 評論0 收藏0