React CSS轉換組

Question

有人可以幫助我上下滑動轉換，我試圖創建一個 全屏彈出。 我無法使用CSSTransitionGroup獲得所需的滑動效果。 代碼例子可以在這裏

發現任何幫助將非常感激。 謝謝

Answer 1

在作怪即使世界的一些問題在這裏的，很容易解決：

1）您必須使用import CSSTransitionGroup from 'react-addons-css-transition-group而不僅僅是普通的舊過渡組包 - 這不僅增加了生命週期掛鉤，其中CSS版本用於添加/刪除類

2）要理解的最重要的事情是實際觸發動畫的內容。 CSS轉換組通過將轉換類應用於正在進入和退出其children（通過鍵保持跟蹤）的子元素，但爲了這樣做，CSSTransitionGroup必須已經存在，它是有條件存在或不存在的子元素。在您的代碼中，只有在彈出狀態處於打開狀態時才添加CSSTransition組，這意味着它無法監視它的子項，因此它只顯示並消失而沒有轉換。因此，你必須做出CSSTransition組總是被渲染，但後來有條件添加彈出DIV作爲一個孩子的狀態是開...

const PopUp = ({ state, close }) => { 

    return (
     <CSSTransitionGroup 
      transitionName="pop" 
      transitionAppear={true} 
      transitionAppearTimeout={2000} 
      transitionEnterTimeout={2000} 
      transitionLeaveTimeout={300} 
      component="div" 
      > 
      {state.open && <div key="popup" 
       style={{ 
       width: window.innerWidth, 
       position: 'fixed', 
       left: 0, 
       top: 0, 
       overflowX: 'hidden', 
       backgroundColor: 'white', 
       zIndex: '999', 
       }} 
      > 
       <span>I am a popup</span> 
       <FlatButton label="Close" onClick={close} /> 
      </div> 
      } 
     </CSSTransitionGroup> 
); 
}; 

3）你可以從上面看到我還增加了在appear情況下，動畫是在第一次安裝的情況發生 - 在你的情況下，其細如在閉合狀態下已經呈現第一，但這裏值得注意以供將來參考

4）最後你是動畫在CSS的height屬性，但你在你的樣式屬性中將高度顯式設置爲height: window.innerHeight。這將轉換爲HTML中的樣式標籤，它始終優先於任何CSS樣式表規則，因此您的動畫高度總是會丟失。刪除它和你的動畫工作 - 但是動畫結束後不會設置高度。你可以通過保持你的height: window.innerHeight並且強制CSS定義的高度用height: 100vh !important;語法來覆蓋它來解決這個問題（儘管這實際上是不好的CSS練習，因爲當你創建更復雜的樣式表時它會讓你頭疼，因爲它會阻止你能夠使用特異性）

這裏是一個工作版本：https://codesandbox.io/s/W7Q8QP56W

進一步改進這個我建議你要麼移到該組件所有的CSS樣式表，使他們能夠工作中使用的特異性和級聯覆蓋對方正常，或者使用類似opacity的動畫來代替動畫（因爲默認默認值是1，你不需要在你的JS風格的道具中設置它） - 反應將刪除整個元素一旦動畫完成後，無論如何你都不會被阻止與頁面交互，因此你可以自由地將它硬編碼到整頁高度

Answer 2

我可以通過反應運動達到同樣的效果。 例子：