如何在每张幻灯片上制作动画?使用react-slick和react-animated-css库

时间:2019-04-10 14:15:58

标签: reactjs

我使用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>
    )
  }
}

0 个答案:

没有答案