反應動畫：在狀態改變時加倍元素

我正在構建一個自動幻燈片，每5秒切換一次圖像。當新圖像進入時，我使用ReactCSSTransitionGroup創建淡入方式。問題是新圖像淡入，舊圖像仍然存在，並且兩個圖像都顯示在屏幕上，舊圖像不會離開直到新圖像完全顯示。我該如何解決？反應動畫：在狀態改變時加倍元素

這是我的滑動組件來顯示圖像：

import React from 'react';  
const Slide = ({picture}) => { 
    if(!picture){ 
    return <div>Loading...</div>; 
    }  
    return (
     <div className='row'> 
     <img src={picture.url} alt={picture.title} /> 
     </div> 
); 
};  
export default Slide;

這是我把這種滑動部件

<ReactCSSTransitionGroup {...transitionOptions}> 
    <Slide key={this.props.active} picture={this.props.active}/> 
    </ReactCSSTransitionGroup>

這在渲染（）方法的父組件的一部分父設置轉換選項

const transitionOptions = { 
    transitionName: "fade", 
    transitionEnterTimeout: 500, 
    transitionLeaveTimeout: 500 
}

這就是樣式

.fade-enter{ 
    opacity: 0; 
} 
.fade-enter-active{ 
    opacity: 1; 
    transition: 0.5s ease-in all; 
}

基本上在父組件中，我有一個setInterval方法，每5秒更改一次活動圖像。那麼，如何讓舊圖像在新圖像淡入淡出的那一刻消失，以便它不會改變我的頁面？謝謝

來源

2016-10-22 stenwolf

這個關鍵可能是一個問題。你爲什麼需要鑰匙？ – Sulthan

如果沒有密鑰，我寫的代碼中就不會有任何動畫。我認爲反應是尋找獨特的東西來知道它是動畫的元素。如果你有2個確切的元素，我可以看到一個視頻，它可能會動畫錯誤的 – stenwolf

將transitionLeave屬性設置爲false，刪除退出動畫，並完全刪除transitionLeaveTimeout屬性。您已配置ReactCSSTransitionGroup以在具有500毫秒定時器的enter和leave上設置動畫。

在我看來，如果退出Slide淡出而進入Slide淡出過渡會更好。對於這種效果，你需要兩個Slide元素是在彼此的頂部，通過絕對定位。這裏有一個例子：http://codepen.io/yeahjohnnn/pen/rrobvR

來源

2016-10-22 07:30:28

這個作品！謝謝。但是，屏幕有閃爍的時刻，我該如何平滑？ – stenwolf

你能分享你的代碼嗎？閃爍可能是由於許多事情。我懷疑在圖像開始淡入的時候，圖像中可能會出現閃爍，並立即消失。請查看此示例，我在這裏使幻燈片在退出時淡出，並在入口處淡入，無閃爍：http：// codepen.io/yeahjohnnn/pen/rrobvR。或者，如果您正在使用圖像，可能會由於圖像加載導致閃爍，但我懷疑（如果是這種情況，您可以預加載圖像並緩存它們）。 –

我發現閃爍的問題。所以當它切換圖像時，圖像仍在加載，所以當它沒有顯示任何東西時，只有幾分之一秒。這使得我有崩潰的形象。我所做的是，我設置父div與我想要的寬度和高度，而不是包含圖像的子div。因此，當它仍然在加載時，空白div的一側是相同的，並停止調整大小的頁面。並感謝你在代碼筆中的例子。我會盡量用它作爲指導，讓我的內容淡入淡出，而不僅僅是一種。 – stenwolf

反應動畫：在狀態改變時加倍元素

回答

相關問題