Javascript 在Bootstrap 5旋转木马中分别设置字幕和幻灯片的动画？

新手程序员，作为一种（自我强加的）练习

我有一个自助式5转盘，有三张幻灯片，每张幻灯片有两行标题。每次幻灯片离开窗口时，顶部标题向上移动，底部标题向下移动。然后，在下一张幻灯片中，新标题以相反方向移动到位

我几乎明白了，但我被最后一个问题困住了：因为标题

div

在幻灯片

div

中，所以标题继承了幻灯片动画，使它们在幻灯片更改时沿对角线移动。此外，幻灯片不会粘在一起。当它们改变时，它们之间有一点空白。这种干扰显然是双向的

我试着从幻灯片中取出标题

div

，然后放在它后面，但是活动幻灯片后面出现的所有标题都重叠了

有没有一个好办法把两个div分开，这样它们就不会互相干扰

这是一个代码笔，您可以在其中看到问题：

这是同一张，但是从幻灯片

div

s中取出标题

div

s，这样您就可以看到它应该是什么样子（除了重叠的文本）：

代码片段中的情况也一样（我现在不太喜欢，但我认为这是由于几分钟前的快速中断造成的）：

错误的转换：

const-topcap=document.queryselectoral（“.carousel-caption”）；
const bottomcap=document.queryselectoral（“.caption-bottom”）；
常量幻灯片类=（“幻灯片”）；
var TACarousel=document.querySelector（“CarouselTextAnim”）；
TACarousel.addEventListener（“slide.bs.carousel”，函数（）{
topcap.forEach（cap=>cap.classList.add（slideclass））；
footmcap.forEach（cap=>cap.classList.add（slideclass））；
});
TACarousel.addEventListener（“slided.bs.carousel”，函数（）{
topcap.forEach（cap=>cap.classList.remove（slideclass））；
footmcap.forEach（cap=>cap.classList.remove（slideclass））；
});
.carousel-inner.carousel项目{
转变：转变；
}
.h1旋转木马{
宽度：100%；
文本对齐：居中；
颜色：白色；
文本阴影：1px1p2pRGBA（2,15,19,0.70）；
字体系列：“Julius Sans One”；
字体风格：普通；
字体大小：400；
字体大小：4vw；
过渡：0.4s；
}
.旋转木马标题{
位置：绝对位置；
最高：40%；
不透明度：1；
过渡：1s；
}
.carousel-caption.slide{
排名：0；
不透明度：1；
}
.标题底部{
位置：相对位置；
底部：4vh；
不透明度：1；
过渡：1s；
}
.caption-bottom.slide{
底部：-90vh；
不透明度：1；
}

顶级电影制作
标题
底部标题
顶端
低调
结束
在下面
以前的
下一个

const-topcap=document.queryselectoral（“.carousel-caption”）；
const bottomcap=document.queryselectoral（“.caption-bottom”）；
常量幻灯片类=（“幻灯片”）；
var TACarousel=document.querySelector（“CarouselTextAnim”）；
TACarousel.addEventListener（“slide.bs.carousel”，函数（）{
topcap.forEach（cap=>cap.classList.add（slideclass））；
footmcap.forEach（cap=>cap.classList.add（slideclass））；
});
TACarousel.addEventListener（“slided.bs.carousel”，函数（）{
topcap.forEach（cap=>cap.classList.remove（slideclass））；
footmcap.forEach（cap=>cap.classList.remove（slideclass））；
});
.carousel-inner.carousel项目{
转型：转型1秒轻松；
}
.h1旋转木马{
宽度：100%；
文本对齐：居中；
颜色：白色；
文本阴影：1px1p2pRGBA（2,15,19,0.70）；
字体系列：“Julius Sans One”；
字体风格：普通；
字体大小：400；
字体大小：4vw；
过渡：0.4s；
}
.旋转木马标题{
位置：绝对位置；
最高：40%；
不透明度：1；
过渡：1s；
}
.carousel-caption.slide{
排名：0；
不透明度：1；
}
.标题底部{
位置：相对位置；
底部：4vh；
不透明度：1；
过渡：1s；
}
.caption-bottom.slide{
底部：-90vh；
不透明度：1；
}

顶级电影制作
标题
底部标题
顶端
低调
结束
在下面
以前的
下一个
谢谢，但为了更好地显示效果，我只进行了两秒钟的主转换和1秒的标题转换。事实上，主标题应该是1秒，标题应该是0.4秒。我不希望他们有相同的过渡时间。这就是为什么我需要把它们分开。而且，你的版本的标题仍然是对角的。你知道怎么让他们直接上去吗？