微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Javascript 文本动画未触发

分类：编程问答

如何解决Javascript 文本动画未触发

我有一个 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>

方法二（只有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','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,-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>

解决方法

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

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

另外，与使用 jQuery 的 $ 来选择元素不同，当使用 vanilla js const TopCap = document.querySelector (".carousel-caption"); 并且在每张幻灯片中有多个元素时，您必须遍历它们并按如下方式选择它们：{{ 1}}

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native