Javascript 文本 animation 未触发

Question

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

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

我还在 CSS 中添加了一个响应部分，这样您就可以看到我想要发生的事情：animation 在 window 宽度为 600 像素时触发。

但是，当幻灯片更改时，相同的 animation 不会触发。 为什么不？ 我怎样才能让它变得更好？

方法一：

 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库，以及将香草 js 与 jQuery 混合，坚持一个，我建议香草。

我没有 go 你的 styles 完全找出它使用哪个 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>