使用React JS的动画元素开关

Question

为了获得一些react-j的经验，我想脚本脚本一个小型幻灯片显示，该幻灯片在某些幻灯片之间使用淡出动画进行切换。(我知道 - 也许那里有终极的超级幻灯片液体，但是要进入主题，我以这种方式开始了:)(

但是，我以某种方式陷入了动画部分，还想知道熟练的React-JS程序员是否会按照我开始的方式进行编码。目前，幻灯片正在切换，没有我从这里获得的动画：https：//github.com/reactjs/react-transition-group/tree/tree/v1-stable

这是我的主要文件：

import React, { Component } from 'react'
import { CSSTransitionGroup } from 'react-transition-group'
import Slide from './Slide'
import '../styles/slider.css';
class Slider extends Component {
constructor() {
    super()
    this.slides = [
        {
            text: "I'm a dummy text #1",
            imgName: "./assets/img01.jpg"
        },
        {
            text: "I'm a dummy text #2",
            imgName: "./assets/img02.png"
        }
    ]
    this.state = {
        currentSlideIdx: 0
    }
}
componentDidMount() {
    this.shiftSlide()
}
shiftSlide () {
    setTimeout(() => {
        this.setState({
            currentSlideIdx: this.state.currentSlideIdx < this.slides.length - 1 ? this.state.currentSlideIdx + 1 : 0
        })
        this.shiftSlide()
    }, 2000)
}
render() {
    const slide = <Slide key={this.slides[this.state.currentSlideIdx]} meta={this.slides[this.state.currentSlideIdx]} />
    return (
        <CSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={300}>
            {slide} 
        </CSSTransitionGroup>
   )
}
}
export default Slider

和slider.css包含示例样式：

.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}

如果有人能给我一个提示，我会很高兴。

谢谢！

Answer 1

来自文档：

csstransitiongroup是基于过渡组的高级API，IS 一种简单的方法来执行CSS过渡和动画 组件进入或离开DOM

您的幻灯片组件永远不会离开DOM。这意味着您应该在 Slide组件中制作动画。