在 Bootstrap 5 轮播中分别为字幕和幻灯片制作动画？答案

【问题标题】：Animate captions and slides separately in Bootstrap 5 carousel?在 Bootstrap 5 轮播中分别为字幕和幻灯片制作动画？
【发布时间】：2021-06-08 11:42:52
【问题描述】：

新手程序员，将其作为（自我强加的）练习。

我有一个 bootstrap 5 轮播，其中包含三张幻灯片，每张幻灯片有两行标题。每次幻灯片离开窗口时，顶部标题向上移动，底部标题向下移动。然后在下一张幻灯片中，新的标题会以相反的方向移动到位。

我几乎明白了，但我遇到了最后一个问题：由于标题 div 在幻灯片 div 内，因此标题继承了滑动动画，使它们当幻灯片改变时沿对角线移动。此外，幻灯片不会粘在一起。当它们发生变化时，它们之间会有一点空白。干扰显然是双向的。

我尝试将标题 div 从幻灯片 div 中取出并放在它后面，但是在活动幻灯片之后出现的所有标题都重叠了。

有没有好的方法可以将两个 div 分开，这样它们就不会相互干扰？

这是一个你可以看到问题的代码笔：https://codepen.io/AlexanderSplat/pen/YzZvEaM

这是同一个，但标题 divs 从幻灯片 divs 中取出，因此您可以看到它应该是什么样子（重叠文本除外）：https://codepen.io/AlexanderSplat/pen/vYxROqo

在代码 sn-ps 中也是如此（现在对我不起作用，但我认为这只是由于几分钟前的 Fastly 中断）：

糟糕的过渡：

const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");

var TACarousel = document.querySelector("#CarouselTextAnim");

TACarousel.addEventListener("slide.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.add(slideclass));
  bottomcap.forEach(cap => cap.classList.add(slideclass));
});

TACarousel.addEventListener("slid.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.remove(slideclass));
  bottomcap.forEach(cap => cap.classList.remove(slideclass));
});

.carousel-inner .carousel-item {
  transition: transform 2s ease;
}

.h1-carousel {
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-size: 4vw;
  transition: 0.4s;
}

.carousel-caption {
  position: absolute;
  top: 40%;
  opacity: 1;
  transition: 1s;
}

.carousel-caption.slide {
  top: 0;
  opacity: 1;
}

.caption-bottom {
  position: relative;
  bottom: 4vh;
  opacity: 1;
  transition: 1s;
}

.caption-bottom.slide {
  bottom: -90vh;
  opacity: 1;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Top Motion Productions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <div class="container-fluid" style="padding: 0" id="carousel">
    <section class="slideshow">
      <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
            </div>
          </div>

          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
        <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
        <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
        <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>

良好的过渡，但字母重叠：

const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");

var TACarousel = document.querySelector("#CarouselTextAnim");

TACarousel.addEventListener("slide.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.add(slideclass));
  bottomcap.forEach(cap => cap.classList.add(slideclass));
});

TACarousel.addEventListener("slid.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.remove(slideclass));
  bottomcap.forEach(cap => cap.classList.remove(slideclass));
});

.carousel-inner .carousel-item {
  transition: transform 1s ease;
}

.h1-carousel {
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-size: 4vw;
  transition: 0.4s;
}

.carousel-caption {
  position: absolute;
  top: 40%;
  opacity: 1;
  transition: 0.4s;
}

.carousel-caption.slide {
  top: 0;
  opacity: 0;
  transition: 0.4s;
}

.caption-bottom {
  position: relative;
  bottom: 4vh;
  opacity: 1;
  transition: 0.4s;
}

.caption-bottom.slide {
  bottom: -90vh;
  opacity: 0;
  transition: 0.4s;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Top Motion Productions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <div class="container-fluid" style="padding: 0" id="carousel">
    <section class="slideshow">
      <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
        <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
        <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
        <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>

【问题讨论】：

标签： javascript css http carousel bootstrap-5

【解决方案1】：

我对你的（第二个）代码做了很多很多的修改。

HTML

已删除所有不必要的导入（animated.css、jquery、font-awesome）。
在 h1 中，caption-top 和 caption-bottom 类与第一张幻灯片不对应，添加了 hidden 类。

CSS

.carousel-caption 已替换为 .carousel-top，但添加了另一个 .carousel-caption 以设置默认 top 属性。
为便于理解，.slide 已替换为 .hidden。
以前的值已作为 cmets 放置。

JS

这就是乐趣！改动及说明：

slideclass 已替换为 hiddenClass。
所有选定的.caption-top 都设置为topcap，所有.carousel-caption 设置为captions。
currentItem 和 nextItem 变量具有存储每张幻灯片的当前和下一个 .carousel-caption 元素的功能。
在DOMContentLoaded 上，对应于第一张幻灯片的第一个.carousel-caption 元素（零位置）已设置为currentItem。
在slide.bs.carousel 和slid.bs.carousel 这两种事件类型中都使用了relatedTarget 属性。 Bootstrap's documentation 说：

relatedTarget：作为活动项滑入到位的 DOM 元素。

nextElementSibling 这里指的是紧随其后的元素。查看 html，我们知道在 .caption-item 之后有一个 .carousel-caption。我认为firstElementChild 和lastElementChild 不需要解释:)

slid.bs.carousel，nextItem 显示，slide.bs.carousel，currentItem 被隐藏（因为它转换到下一张幻灯片）。

const topcap = document.querySelectorAll(".caption-top");
const bottomcap = document.querySelectorAll(".caption-bottom");
const captions = document.querySelectorAll(".carousel-caption");
const hiddenClass = "hidden";

var TACarousel = document.querySelector("#CarouselTextAnim");

let currentItem, nextItem;

document.addEventListener("DOMContentLoaded", function(e) {
  currentItem = captions[0];
});

TACarousel.addEventListener("slid.bs.carousel", function(e) {
  currentItem = e.relatedTarget.nextElementSibling;

  nextItem.firstElementChild.classList.remove(hiddenClass);
  nextItem.lastElementChild.classList.remove(hiddenClass);
});

TACarousel.addEventListener("slide.bs.carousel", function(e) {
  nextItem = e.relatedTarget.nextElementSibling;

  currentItem.firstElementChild.classList.add(hiddenClass);
  currentItem.lastElementChild.classList.add(hiddenClass);
});

.carousel-inner .carousel-item {
  transition: transform 1s ease;
}

.h1-carousel {
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.7);
  font-family: "Julius Sans One";
  font-style: normal;
  font-weight: 400;
  font-size: 4vw;
  /*transition: 0.4s;*/
}

.carousel-caption {
  top: 40%;
}

.caption-top {
  position: relative; /*absolute*/
  top: 0; /*<= added*/
  opacity: 1;
  transition: .4s;
}

.caption-top.hidden {
  top: -90vh; /*0*/
  opacity: 0;
  transition: .4s;
}

.caption-bottom {
  position: relative;
  bottom: 4vh;
  opacity: 1;
  transition: .4s;
}

.caption-bottom.hidden {
  bottom: -90vh;
  opacity: 0;
  transition: .4s;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Top Motion Productions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container-fluid" style="padding: 0" id="carousel">
    <section class="slideshow">
      <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top hidden">UP TOP</h1>
            <h1 class="h1-carousel mb-5 caption-bottom hidden">DOWN LOW</h1>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top hidden">OVER</h1>
            <h1 class="h1-carousel mb-5 caption-bottom hidden">UNDER</h1>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
          <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
          <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>

【讨论】：

太棒了！太感谢了！与此同时，我一直在自己修补它，并发现了一些你提到我自己的事情，但我仍然与正确的最终结果相去甚远。我将深入研究您的代码，直到我完全理解每个部分的作用。 :) 我的感激不尽！
我完全理解你，这对我来说也不容易。在这些情况下，调试器和反复试验是好朋友：D
codepen.io/AlexanderSplat/pen/OJpBoeN 如果您对我在此期间自己取得的进展感兴趣。
与您问题中的 sn-p 或上面评论中的笔相比？
哦，不，等等，对不起。我正在混合我自己的sn-ps。 :) 我正在查看我的问题中第一个 sn-p 的结果，它确实是对角线的，而我的第二个代码不是。不，那是有道理的。这是因为在“对角线版本”中，标题 div 位于项目 div 内，最初我认为这是让标题在每次幻灯片更改时执行任何操作的唯一方法。

【解决方案2】：

const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");

var TACarousel = document.querySelector("#CarouselTextAnim");

TACarousel.addEventListener("slide.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.add(slideclass));
  bottomcap.forEach(cap => cap.classList.add(slideclass));
});

TACarousel.addEventListener("slid.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.remove(slideclass));
  bottomcap.forEach(cap => cap.classList.remove(slideclass));
});

.carousel-inner .carousel-item {
  transition: transform 1s ease;
}

.h1-carousel {
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-size: 4vw;
  transition: 0.4s;
}

.carousel-caption {
  position: absolute;
  top: 40%;
  opacity: 1;
  transition: 1s;
}

.carousel-caption.slide {
  top: 0;
  opacity: 1;
}

.caption-bottom {
  position: relative;
  bottom: 4vh;
  opacity: 1;
  transition: 1s;
}

.caption-bottom.slide {
  bottom: -90vh;
  opacity: 1;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Top Motion Productions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <div class="container-fluid" style="padding: 0" id="carousel">
    <section class="slideshow">
      <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
            </div>
          </div>

          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
        <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
        <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
        <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>

只需将2s改为1s的过渡速度。请检查sn-p

【讨论】：

谢谢，但我只做了两秒的主要过渡和一秒的字幕，以更好地展示效果。它实际上应该是主要的 1 秒和字幕的 0.4 秒。我不希望他们有相同的过渡时间。这就是为什么我需要将它们分开。
另外，您的版本仍然有对角线的字幕。你知道让他们直接上去的方法吗？