Javascript 文字动画未触发

Question

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

我是一名编码新手，我将此作为练习。您可以在下面或 CodePen 中看到我为此编写的代码。我试过两种方法，第二种方法在CodePen的JS部分有注释。

我还在 CSS 中添加了一个响应部分，因此您可以看到我想要发生的事情：动画在 window 宽度为 600px 时触发。

不过，当幻灯片发生变化时，不会触发相同的动画。为什么不？我怎样才能让它变得更好？

方法一：

import * as jquery from "https://cdn.skypack.dev/jQuery@1.7.4";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");
const SlideClass = ("slide");

$('#CarouselTextAnim').on('slide.bs.carousel', function() {
    TopCap.classlist.addClass(SlideClass);
    BottomCap.classlist.addClass(SlideClass);
});

$('#CarouselTextAnim').on('slid.bs.carousel', function() {
    TopCap.classlist.removeClass(SlideClass);
    BottomCap.classlist.removeClass(SlideClass);
});

.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;
}

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

.caption-bottom.slide {
    bottom: -30vh;
    opacity: 0;
}

@media (max-width: 600px) {
  .carousel-caption {
      top: 0;
      opacity: 0;
}
  .caption-bottom {
      bottom: -30vh;
      opacity: 0;
  }
}

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>Carousel text anim</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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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="5000" 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="script.js"></script>   
    <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>
  </body>

方法二（只有Javascript不同）：

import * as 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.setAttribute('top', '0');
    TopCap.setAttribute('opacity', '0');
    BottomCap.setAttribute('bottom', '0');
    BottomCap.setAttribute('opacity', '0');
});

$('#CarouselTextAnim').on('slid.bs.carousel', function() {
    TopCap.setAttribute('top', '40%');
    TopCap.setAttribute('opacity', '1');
    BottomCap.setAttribute('bottom', '4vh');
    BottomCap.setAttribute('opacity', '1');
});

.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;
}

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

.caption-bottom.slide {
    bottom: -30vh;
    opacity: 0;
}

@media (max-width: 600px) {
  .carousel-caption {
      top: 0;
      opacity: 0;
}
  .caption-bottom {
      bottom: -30vh;
      opacity: 0;
  }
}

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>Carousel text anim</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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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="5000" 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="script.js"></script>   
    <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>
  </body>

Answer 1

你在你的笔中混合了 jQuery 库，以及混合 vanilla js 和 jQuery，只坚持一个，我建议 vanilla。

我并没有完全研究你的样式来找出它使用哪个 class 来处理底部效果，你必须更新它，但顶部元素正在工作。

也不同于使用 jQuery 的 $ 到 select 元素，当使用 vanilla js const TopCap = document.querySelector (".carousel-caption"); 并且每张幻灯片中有多个元素时，您必须遍历它们并 select 它们全部如下：const TopCap = document.querySelectorAll (".carousel-caption");

const TopCap = document.querySelectorAll(".carousel-caption");
const BottomCap = document.querySelectorAll(".caption-bottom");

var myCarousel = document.querySelector('#CarouselTextAnim')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: true
})

myCarousel.addEventListener('slid.bs.carousel', function () {
  TopCap.forEach(cap=>cap.classList.remove('slide'));  
  BottomCap.forEach(cap=>cap.classList.remove('slide'));
});

myCarousel.addEventListener('slide.bs.carousel', function () {
  TopCap.forEach(cap=>cap.classList.add('slide'));  
  BottomCap.forEach(cap=>cap.classList.add('slide'));
});

.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;
}

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

.caption-bottom.slide {
    bottom: -30vh;
    opacity: 0;
}

@media (max-width: 600px) {
  .carousel-caption {
      top: 0;
      opacity: 0;
}
  .caption-bottom {
      bottom: -30vh;
      opacity: 0;
  }
}

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>Carousel text anim</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">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<div class="container-fluid" style="padding: 0" id="carousel">
  <section class="slideshow">
    <div id="CarouselTextAnim" class="carousel slide carousel-slide">
      <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>

Javascript 文字动画未触发

Javascript text animation not triggering

javascript

jquery

carousel

bootstrap-5