stackoom
  简体   繁体   中英

Javascript text animation not triggering

 原文  2021-06-03 14:26:08  0   1    javascript/ jquery/ carousel/ bootstrap-5

Question

I have a Bootstrap 5 carousel with two lines of caption per slide. Each time right before the slide changes, I want the old top caption to move up and fade out, and the old bottom caption to move down and fade out. Then on the next slide, the new top caption should move down into place and fade in and the new bottom caption should move up into place and fade in.

I'm a novice coder and I'm doing this as an excercise. You can see the code I've written for this below, or in this CodePen . I've tried it two ways, the second method is commented in the JS section in CodePen.

I've also added a responsive section to the CSS so you can kind of see what I want to happen: the animation is triggered at a window width of 600px.

The same animation doesn't trigger when the slides change, though. Why not? How can I make it better?

Method 1: 

 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>

Method 2 (only the Javascript is different): 

 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>

1 answers

solution1
 1 ACCPTED  2021-06-03 15:09:50

You are mixing jQuery libraries in your pen, as well as mixing vanilla js with jQuery, just stick to one, I'd suggest vanilla.

I did not go your styles entirely to find out which class it uses to handle that bottom effect, which you will have to update, but the top element is working.

Also unlike using jQuery's $ to select elements, when using vanilla js const TopCap = document.querySelector (".carousel-caption"); and have several elements as in each slide, you would have to loop through them and select them all as follow: 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Triggering CSS animation with JavaScript Triggering a basic CSS animation with Javascript Triggering a svg animation with jquery/javascript triggering CSS animation with JavaScript not working Javascript css marginTop transition not triggering with animation Triggering and looping a CSS3 animation using JavaScript Triggering a CSS animation again with a JavaScript event Triggering a flip animation in CSS3 with Javascript CSS/Javascript animation with text Javascript draw text animation
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM