緩和React中的轉換

我剛剛開始使用React，並遇到了一個我期待的非常簡單的問題。我所要做的就是讓一段文字淡入，然後基於一個簡單的觸發淡出，但我無法讓它淡出。緩和React中的轉換

的代碼如下，我有一個按鈕，使得該消息出現。它正在消失，並在兩秒鐘後消失，但我期待消息離開後淡出......但顯然我誤解了React-ish過渡CSS中的含義。

這裏的陣營組成：

class MessageSender extends React.Component { 
    render() { 
    let sent_element = null; 
    if (this.state.linkSent) { 
     sent_element = <AnimatedText/>; 
    } 
    return (
    <div> 
     {sent_element} 
    </div> 
); 


    //A fetch then triggers: 
    ...then((json) => { 
     if (json.success) { 
     _this.setState({ 
      linkSent: true 
     }) 
     setTimeout(
      function(){ 
       _this.setState({linkSent:false}); 
      },2000 
     ) 
     } 
    }); 
} 

class AnimatedText extends React.Component { 
    render() { 
    return <ReactTransitionGroup transitionAppear={true} transitionName="fadeInOut"> 
     <div>Sent!</div> 
    </ReactTransitionGroup>; 
    } 
}

這裏是CSS：

.fadeInOut-appear { 
    opacity: 0.01; 
    transition: opacity 0.4s ease-in-out; 
    -webkit-transition: opacity 0.4s ease-in-out; 
} 

.fadeInOut-appear.fadeInOut-appear-active { 
    opacity: 1; 
} 

.fadeInOut-leave { 
    opacity: 1; 
    transition: opacity 0.4s ease-in-out; 
    -webkit-transition: opacity 0.4s ease-in-out; 
} 

.fadeInOut-leave.fadeInOut-leave-active { 
    opacity: 0.01; 
}

來源

2015-10-30 faceremover

您應該使用ReactCSSTransitionGroup，高層次的API周圍ReactTransitionGroup

import `ReactCSSTransitionGroup` from "react-addons-css-transition-group";

在陣營> v0.14，您還必須通過transitionLeaveTimeout和可選的transitionAppearTimeout支持該組件，如果你有transitionAppear啓用（你這樣做）。

最後，你需要key -attribute傳遞給你的孩子動畫片

您必須提供ReactCSSTransitionGroup的所有子鍵屬性，僅呈現單個項目時也是如此。這就是React如何確定哪些孩子進入，離開或留下的。

您可能還需要重構你的代碼一下，讓你的ReactCSSTransitionGroup不是<AnimatedText >內，而是被周圍的{sent_element}

有關更多信息，請參見React/Animation-docs包裹。

來源

2015-10-31 11:26:17

我現在用的是進口：'進口插件「反應/插件」; var ReactTransitionGroup = addons.addons.CSSTransitionGroup;'我得到的出現過渡完全超過400毫秒淡入淡出。究竟是什麼觸發了**離開**條件？我試圖逐步加強我的過渡小組，但在上班途中無法獲得任何東西。它最終看起來像這樣：''。如果在sent_element附近也是相同的行爲。 – faceremover

你給孩子添加了「key」屬性嗎？如

foo

'？ React需要鍵值（該元素必須是唯一的）才能確定組件是否已經離開。觸發元素時請檢查瀏覽器上的DevTools。 –

更多好玩的動畫看到GitHub上https://github.com/chenglou/react-motion的反應運動lib中可用

來源

2015-10-31 15:15:52 Davet

緩和React中的轉換

回答

相關問題