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

Question

我正在构建一个每 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;

这是我称之为 Slide 组件的父组件的一部分

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

这是在parent的render()方法中设置transition的选项

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 秒更改一次活动图像。那么，如何让旧图像在新图像开始褪色时消失，这样它就不会改变我的页面？谢谢

Answer 1

通过将 transitionLeave 属性设置为 false 来移除退出动画，并完全移除 transitionLeaveTimeout 属性。您已将 ReactCSSTransitionGroup 配置为使用 500 毫秒计时器在 enter 和 leave 上设置动画。

在我看来，如果退出 Slide 淡出而进入 Slide 淡入则过渡会更好。为此效果，您需要两个 Slide 元素来通过绝对定位相互叠加。这是一个例子：http://codepen.io/yeahjohnnn/pen/rrobvR

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

React animation: doubled element on state change

animation

reactjs

reactcsstransitiongroup