Question

为了获得react-js的一些经验，我想编写一个小幻灯片，可以在一些带有淡入淡出动画的幻灯片之间切换。（我知道 - 也许有最终的超幻灯片lib，但是为了进入这个话题，我开始这样:)）

但不知怎的，我陷入了动画部分的困境，并且还想知道熟练的react-js程序员是否会按照我开始的方式对其进行编码。目前幻灯片正在切换而没有我从这里获得的动画：https://github.com/reactjs/react-transition-group/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

来自Docs：

CSSTransitionGroup是一个基于TransitionGroup的高级API，而且是一个简单的方法来执行CSS转换和动画当一个React 组件进入或离开DOM

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

具有反应js的Animate元素开关

1 个答案: