我使用react-slick和react-animated-css库。 想要为每张幻灯片上的文本设置动画。 但是,当我加载页面时,所有幻灯片都会在一分钟内为文本添加动画。 而且当我更改当前幻灯片时,其上的动画不起作用。
如何为每张幻灯片添加最新动画?
import React, { Component } from 'react';
import Slider from "react-slick";
import {Animated} from "react-animated-css";
export default class SimpleSlider extends Component {
render() {
return (
<section className="section-slide">
<div className="wrap-slick1">
<Slider {...this.settings} className="slick1" ref="slider">
<div className="item-slick1 image1" style={{backgroundImage: 'url(images/slide-01.jpg)'}}>
<div className="container h-full">
<div className="flex-col-l-m h-full p-t-100 p-b-30 respon5">
<Animated animationIn="fadeInDown" animationInDelay="0" className="layer-slick1">
<span className="ltext-101 cl2 respon2">
Women Collection 2018
</span>
</Animated>
<Animated animationIn="fadeInUp" animationInDelay="800" className="layer-slick1">
<h2 className="ltext-201 cl2 p-t-19 p-b-43 respon1">
NEW SEASON
</h2>
</Animated>
<Animated animationIn="zoomIn" animationInDelay="1600" className="layer-slick1">
<a href="product.html" className="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">
Shop Now
</a>
</Animated>
</div>
</div>
</div>
...
</Slider>
</div>
</section>
)
}
}