反应动画：在状态改变时加倍元素

问题描述：

我正在构建一个自动幻灯片，每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秒更改一次活动图像。那么，如何让旧图像在新图像淡入淡出的那一刻消失，以便它不会改变我的页面？谢谢

这个关键可能是一个问题。你为什么需要钥匙？ – Sulthan

如果没有密钥，我写的代码中就不会有任何动画。我认为反应是寻找独特的东西来知道它是动画的元素。如果你有2个确切的元素，我可以看到一个视频，它可能会动画错误的 – stenwolf

答

将transitionLeave属性设置为false，删除退出动画，并完全删除transitionLeaveTimeout属性。您已配置ReactCSSTransitionGroup以在具有500毫秒定时器的enter和leave上设置动画。

在我看来，如果退出Slide淡出而进入Slide淡出过渡会更好。对于这种效果，你需要两个Slide元素是在彼此的顶部，通过绝对定位。这里有一个例子：http://codepen.io/yeahjohnnn/pen/rrobvR

这个作品！谢谢。但是，屏幕有闪烁的时刻，我该如何平滑？ – stenwolf

你能分享你的代码吗？闪烁可能是由于许多事情。我怀疑在图像开始淡入的时候，图像中可能会出现闪烁，并立即消失。请查看此示例，我在这里使幻灯片在退出时淡出，并在入口处淡入，无闪烁：http：// codepen.io/yeahjohnnn/pen/rrobvR。或者，如果您正在使用图像，可能会由于图像加载导致闪烁，但我怀疑（如果是这种情况，您可以预加载图像并缓存它们）。 –

我发现闪烁的问题。所以当它切换图像时，图像仍在加载，所以当它没有显示任何东西时，只有几分之一秒。这使得我有崩溃的形象。我所做的是，我设置父div与我想要的宽度和高度，而不是包含图像的子div。因此，当它仍然在加载时，空白div的一侧是相同的，并停止调整大小的页面。并感谢你在代码笔中的例子。我会尽量用它作为指导，让我的内容淡入淡出，而不仅仅是一种。 – stenwolf

反应动画：在状态改变时加倍元素

相关推荐