reactjs - 如何将动画添加到 reactstarp carousal 字幕?
问题描述
问题:
我使用 Reactstrap 在 React 中创建了一个 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,有人可以帮我修改此代码以向此标题添加动画吗?我在谷歌上搜索了它,但我无法为我的问题找到合适的答案。如果有人可以帮助我解决这个问题。这是一个很大的帮助。谢谢!!
解决方案
推荐阅读
- django - 如何在 django 框架中正确使用 djangify?
- aframe - 如何在 A-frame 中向多用户 WebVR 添加名称标签
- ios - 如何使 UIView 从另一个带有动画的 UIView 的一侧出来?
- amazon-web-services - 通过 Lambda 将数据存储到 AWS Aurora Mysql 中?
- android - 使用 Jetpack Nav 框架的片段中的 SharedElementTransition
- grammar - 无法使用上下文语法构造语言
- javascript - 摩卡--检查-brk
似乎已停止工作 - 附加调试器时测试文件不运行 - python - 如何安装 R 包 movMF 以与 rpy2 一起使用?
- javascript - 仅在其他 async/await 函数解决后才调用函数
- apache - Apache2 服务器关闭 找不到私钥