Javascript文本动画未触发

【问题标题】：Javascript text animation not triggeringJavascript文本动画未触发
【发布时间】：2021-06-03 23:09:50
【问题描述】：

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

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

我还在 CSS 中添加了一个响应式部分，因此您可以看到我想要发生的情况：动画在 600 像素的窗口宽度处触发。

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

方法一：

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>

方法2（只有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>

【问题讨论】：

    标签： javascript jquery carousel bootstrap-5


    【解决方案1】：

    您在笔中混合jQuery 库，以及混合香草js 和jQuery，只要坚持一个，我建议香草。

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

    也不同于使用 jQuery 的 $ 选择元素，当使用 vanilla js const TopCap = document.querySelector (".carousel-caption"); 并且在每张幻灯片中有多个元素时，您必须循环遍历它们并按如下方式选择它们：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>

    【讨论】：

    • 啊，我想这可能与我在查找问题标签时认为 jquery 和 javascript 可以互换有关。谢谢！我会看看我现在是否也可以让底部工作。
    猜你喜欢
    • 2021-06-26
    • 2019-08-14
    • 1970-01-01
    • 2017-12-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-19
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode