是否在Bootstrap 5旋转木马中分别为字幕和幻灯片制作动画？ [英] Animate captions and slides separately in Bootstrap 5 carousel?
本文介绍了是否在Bootstrap 5旋转木马中分别为字幕和幻灯片制作动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
新手程序员，将此作为(自行添加的)练习来执行。
我有一个Bootstrap 5旋转木马，其中有三张幻灯片，每张幻灯片都有两行标题。每次幻灯片离开窗口时，顶部标题上移，底部标题下移。然后，在下一张幻灯片中，新标题将以相反的方向移动到位。
我已经差不多了，但是我遇到了最后一个问题：由于标题div在幻灯片div中，标题继承了滑动动画，使它们在幻灯片更改时沿对角线移动。此外，幻灯片不能粘在一起。当它们改变时，它们之间会有一点空白。干扰显然是双向的。
我已尝试将标题div从幻灯片div中取出并放在其后面，但是活动幻灯片之后出现的所有标题都会重叠。
有没有好的方法来分隔这两个div，使它们不会相互干扰？
以下是您可以看到问题的代码：https://codepen.io/AlexanderSplat/pen/YzZvEaM
这里是同一张幻灯片，但是标题div从幻灯片divs中去掉了，所以您可以看到它应该是什么样子(除了重叠的文本)：https://codepen.io/AlexanderSplat/pen/vYxROqo
代码片段也是如此(我现在不能使用，但我想这只是因为几分钟前的快速中断)：
错误的转换：
const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");
var TACarousel = document.querySelector("#CarouselTextAnim");
TACarousel.addEventListener("slide.bs.carousel", function() {
topcap.forEach(cap => cap.classList.add(slideclass));
bottomcap.forEach(cap => cap.classList.add(slideclass));
});
TACarousel.addEventListener("slid.bs.carousel", function() {
topcap.forEach(cap => cap.classList.remove(slideclass));
bottomcap.forEach(cap => cap.classList.remove(slideclass));
});.carousel-inner .carousel-item {
transition: transform 2s ease;
}
.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: 1s;
}
.carousel-caption.slide {
top: 0;
opacity: 1;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 1s;
}
.caption-bottom.slide {
bottom: -90vh;
opacity: 1;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Top Motion Productions</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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.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="2000" 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="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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>好的过渡，但字母重叠：
const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");
var TACarousel = document.querySelector("#CarouselTextAnim");
TACarousel.addEventListener("slide.bs.carousel", function() {
topcap.forEach(cap => cap.classList.add(slideclass));
bottomcap.forEach(cap => cap.classList.add(slideclass));
});
TACarousel.addEventListener("slid.bs.carousel", function() {
topcap.forEach(cap => cap.classList.remove(slideclass));
bottomcap.forEach(cap => cap.classList.remove(slideclass));
});.carousel-inner .carousel-item {
transition: transform 1s ease;
}
.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;
transition: 0.4s;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -90vh;
opacity: 0;
transition: 0.4s;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Top Motion Productions</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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.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="2000" 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>
<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 class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
</div>
<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 class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
</div>
<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>
<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="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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>推荐答案
我对您的(第二个)代码做了很多更改。
HTML
- 所有不必要的导入(Animated.css、jQuery、font-awed)均已删除。
- 在具有与第一张幻灯片不对应的类
caption-top和caption-bottom的h1中，添加了类hidden。
CSS
.carousel-caption已替换为.carousel-top，但添加了另一个.carousel-caption以设置默认top属性。.slide替换为.hidden，以便更好地理解。- 以前的值已作为注释放入。
JS
这就是有趣的地方！更改和说明：
slideclass替换为hiddenClass。- 所有选中的
.caption-top已设置为topcap，所有.carousel-caption设置为captions。 currentItem和nextItem变量具有存储每张幻灯片的当前和下一个.carousel-caption元素的功能。- 在DOMContentLoaded上，与第一张幻灯片对应的第一个
.carousel-caption元素(零位置)已设置为currentItem。 - 在
slide.bs.carousel和slid.bs.carousel两种事件类型中都使用了relatedTarget属性。 Bootstrap's documentation表示：
relatedTarget：作为活动项滑入位置的DOM元素。
nextElementSibling这里是指紧跟其后的元素。查看html，我们知道在.caption-item之后有一个.carousel-caption。我认为firstElementChild和lastElementChild不需要解释：)
- 在
slid.bs.carousel处显示nextItem，在slide.bs.carousel处隐藏currentItem(在切换到下一张幻灯片时)。
const topcap = document.querySelectorAll(".caption-top");
const bottomcap = document.querySelectorAll(".caption-bottom");
const captions = document.querySelectorAll(".carousel-caption");
const hiddenClass = "hidden";
var TACarousel = document.querySelector("#CarouselTextAnim");
let currentItem, nextItem;
document.addEventListener("DOMContentLoaded", function(e) {
currentItem = captions[0];
});
TACarousel.addEventListener("slid.bs.carousel", function(e) {
currentItem = e.relatedTarget.nextElementSibling;
nextItem.firstElementChild.classList.remove(hiddenClass);
nextItem.lastElementChild.classList.remove(hiddenClass);
});
TACarousel.addEventListener("slide.bs.carousel", function(e) {
nextItem = e.relatedTarget.nextElementSibling;
currentItem.firstElementChild.classList.add(hiddenClass);
currentItem.lastElementChild.classList.add(hiddenClass);
});.carousel-inner .carousel-item {
transition: transform 1s ease;
}
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.7);
font-family: "Julius Sans One";
font-style: normal;
font-weight: 400;
font-size: 4vw;
/*transition: 0.4s;*/
}
.carousel-caption {
top: 40%;
}
.caption-top {
position: relative; /*absolute*/
top: 0; /*<= added*/
opacity: 1;
transition: .4s;
}
.caption-top.hidden {
top: -90vh; /*0*/
opacity: 0;
transition: .4s;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: .4s;
}
.caption-bottom.hidden {
bottom: -90vh;
opacity: 0;
transition: .4s;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Top Motion Productions</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">
</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="2000" 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>
<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 class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
</div>
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top hidden">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom hidden">DOWN LOW</h1>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
</div>
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top hidden">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom hidden">UNDER</h1>
</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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>这篇关于是否在Bootstrap 5旋转木马中分别为字幕和幻灯片制作动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
