Javascript文本动画未触发

我有一个引导5转盘，每张幻灯片有两行标题。每次幻灯片更改之前，我都希望旧的顶部标题向上移动并淡出，而旧的底部标题向下移动并淡出。然后在下一张幻灯片上，新的顶部标题应向下移动到位并淡入，而新的底部标题应向上移动到位并淡入

我是一个新手程序员，我这样做是为了锻炼。您可以在下面或下面看到我为此编写的代码。我尝试了两种方法，第二种方法在CodePen的JS部分中进行了注释

我还为CSS添加了一个响应部分，这样您可以看到我想要发生的事情：动画在600px的窗口宽度下被触发

但是，幻灯片更改时不会触发相同的动画。为什么不呢？我怎样才能做得更好

方法1：

import*作为jquery from”https://cdn.skypack.dev/jQuery@1.7.4";
const TopCap=document.querySelector（“.carousel caption”）；
const BottomCap=document.querySelector（“.caption-bottom”）；
常量幻灯片类=（“幻灯片”）；
$（'#CarouselTextAnim'）。on（'slide.bs.carousel'，function（）{
TopCap.classlist.addClass（SlideClass）；
BottomCap.classlist.addClass（SlideClass）；
});
$（'#CarouselTextAnim'）。on（'slided.bs.carousel'，function（）{
TopCap.classlist.removeClass（滑动类）；
BottomCap.classlist.removeClass（SlideClass）；
});
.h1旋转木马{
宽度：100%；
文本对齐：居中；
颜色：白色；
文本阴影：1×1×2×rgba（2,15,19,0.70）；
字体系列：“Julius Sans One”；
字体风格：普通；
字体大小：400；
字体大小：4vw；
过渡：0.4s；
}
.旋转木马标题{
位置：绝对位置；
最高：40%；
不透明度：1；
过渡：0.4s；
}
.carousel-caption.slide{
排名：0；
不透明度：0；
}
.标题底部{
位置：相对位置；
底部：4vh；
不透明度：1；
过渡：0.4s；
}
.caption-bottom.slide{
底部：-30vh；
不透明度：0；
}
@介质（最大宽度：600px）{
.旋转木马标题{
排名：0；
不透明度：0；
}
.标题底部{
底部：-30vh；
不透明度：0；
}
}

旋转文字动画
标题
底部标题
顶端
低调
结束
在下面
以前的
下一个
你在笔中混合了
jQuery
库，也混合了vanilla js和jQuery，我建议你还是坚持一个吧

我并没有完全了解你的风格，以找出它使用哪个类来处理底部效果，你将不得不更新，但顶部元素正在工作

与使用jQuery的
$
选择元素不同，当使用vanilla js
const TopCap=document.querySelector（“.carousel caption”）和每个幻灯片中的几个元素一样，您必须循环浏览它们并按如下方式选择它们：
const TopCap=document.queryselectoral（“.carousel caption”）


const-TopCap=document.queryselectoral（“.carousel-caption”）；
const BottomCap=document.queryselectoral（“.caption-bottom”）；
var myCarousel=document.querySelector（“#CarouselTextAnim”）
var carousel=new bootstrap.carousel（myCarousel{
间隔时间：2000年，
包装：对
})
myCarousel.addEventListener（'slided.bs.carousel'，函数（）{
TopCap.forEach（cap=>cap.classList.remove（'slide'）；
BottomCap.forEach（cap=>cap.classList.remove（'slide'）；
});
myCarousel.addEventListener（'slide.bs.carousel'，函数（）{
TopCap.forEach（cap=>cap.classList.add（'slide'）；
footmcap.forEach（cap=>cap.classList.add（'slide'）；
});
.h1旋转木马{
宽度：100%；
文本对齐：居中；
颜色：白色；
文本阴影：1×1×2×rgba（2,15,19,0.70）；
字体系列：“Julius Sans One”；
字体风格：普通；
字体大小：400；
字体大小：4vw；
过渡：0.4s；
}
.旋转木马标题{
位置：绝对位置；
最高：40%；
不透明度：1；
过渡：0.4s；
}
.carousel-caption.slide{
排名：0；
不透明度：0；
}
.标题底部{
位置：相对位置；
底部：4vh；
不透明度：1；
过渡：0.4s；
}
.caption-bottom.slide{
底部：-30vh；
不透明度：0；
}
@介质（最大宽度：600px）{
.旋转木马标题{
排名：0；
不透明度：0；
}
.标题底部{
底部：-30vh；
不透明度：0；
}
}

旋转文字动画
标题
底部标题
顶端
低调
结束
在下面
以前的
下一个
Ah，我想这可能与我在查找问题标签时认为jquery和javascript可以互换有关。谢谢我会看看我现在是否能让底部也工作。