Как добавить анимацию, чтобы отреагировать на заглушки? - PullRequest
Новая
       10

Как добавить анимацию, чтобы отреагировать на заглушки?

0 голосов
/ 29 ноября 2018

Проблема:

Я создал Carousal в React с использованием Reactstrap.Я хочу добавить анимацию в заголовок Carousal.Я пытался сделать это с помощью CSS, но это не сработало.Вот как выглядит мой код. 

import React, { Component } from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";

const items = [
  {
    src: require("../assets/img/slide4.jpg"),
    altText: "Slide 1",
    caption: "Road Rules Are Not to Funish You But To protect You!!"
  },
  {
    src: require("../assets/img/slide2.jpg"),
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    src: require("../assets/img/slide3.jpg"),
    altText: "Slide 3",
    caption: "Slide 3"
  }
];

class Carousal extends Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.goToIndex = this.goToIndex.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = this.onExited.bind(this);
  }

  onExiting() {
    this.animating = true;
  }

  onExited() {
    this.animating = false;
  }

  next() {
    if (this.animating) return;
    const nextIndex =
      this.state.activeIndex === items.length - 1
        ? 0
        : this.state.activeIndex + 1;
    this.setState({ activeIndex: nextIndex });
  }

  previous() {
    if (this.animating) return;
    const nextIndex =
      this.state.activeIndex === 0
        ? items.length - 1
        : this.state.activeIndex - 1;
    this.setState({ activeIndex: nextIndex });
  }

  goToIndex(newIndex) {
    if (this.animating) return;
    this.setState({ activeIndex: newIndex });
  }

  render() {
    const { activeIndex } = this.state;

    const slides = items.map(item => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
          <CarouselCaption
            captionText={item.altText}
            captionHeader={item.caption}
          />
        </CarouselItem>
      );
    });

    return (
      <Carousel
        activeIndex={activeIndex}
        next={this.next}
        previous={this.previous}
      >
        <CarouselIndicators
          items={items}
          activeIndex={activeIndex}
          onClickHandler={this.goToIndex}
        />
        {slides}
        <CarouselControl
          direction="prev"
          directionText="Previous"
          onClickHandler={this.previous}
        />
        <CarouselControl
          direction="next"
          directionText="Next"
          onClickHandler={this.next}
        />
      </Carousel>
    );
  }
}

export default Carousal;

Может ли кто-нибудь помочь мне изменить этот код, чтобы добавить анимацию к этой подписи, если это возможно с Reactstrap ?.И я искал об этом в Google, но я не смог найти подходящий ответ на мой вопрос.Если кто-то может помочь мне с этим.Это отличная помощь.Спасибо !!

...