css - 如何将过渡应用到 JS 滑块？
问题描述
在下面的代码片段中，我有一个基于 JS 的滑块。我正在尝试向滑块添加过渡，并且已添加transition: all 1s ease;到多个元素，但没有按预期过渡。
仅供参考 - 滑块仅适用于 1200px+ 视口。
如何在幻灯片之间添加过渡，以便在导航时缓和？
//handles slider
let toggleSlide = function () {
document.querySelectorAll(".video-slider.active");
this.classList.add("active");
this.nextElementSibling(".video-slider");
this.classList.add(".video-slider:first");
this.at(-1);
this.classList.add("active");
};
for (const control of document.querySelectorAll(".nav-arrows .arrow")) {
control.addEventListener("click", function () {
const slides = [...document.querySelectorAll(".video-slider")];
let index = slides.findIndex((slide) => slide.classList.contains("active"));
slides[index].classList.remove("active");
index =
(index + (control.id === "left-arrow" ? -1 : 1) + slides.length) %
slides.length;
slides[index].classList.add("active");
});
}
// handles Wistia
var firstPlay = false;
$(".people-love-nextiva .vid-ct").on("click", function () {
var videoId = "";
var videoNum = $(this).find(".vid-thumb").attr("id");
if (videoNum == "video-1") {
videoId = "2uzup7d1l3";
} else if (videoNum == "video-2") {
videoId = "h16fin8bfq";
} else if (videoNum == "video-3") {
videoId = "i0ijlogr4q";
}
if (!$(this).hasClass("played")) {
if (firstPlay == false) {
$(this).prepend('<script src="https://fast.wistia.com/assets/external/E-v1.js" async><\/script>');
firstPlay = true;
}
$(this).find(".vid-thumb").remove();
$(this).hide().prepend(
'<script src="https://fast.wistia.com/embed/medias/' +
videoId +
'.jsonp" async><\/script><div class="wistia_embed wistia_async_' +
videoId +
' videoFoam=true" style="width:100%;"> </div>'
).fadeIn(1250);
// Wistia JavaScript API calls
window._wq = window._wq || [];
// Pauses any currently playing video and plays specific video that was clicked
_wq.push(
{
id: "_all",
onReady: function (video) {
video.pause();
}
},
{
id: videoId,
onReady: function (video) {
video.play();
}
}
);
// Add class played so if statement above knows whether a vid-ct has already been clicked
$(this).addClass("played");
}
});::-webkit-scrollbar {
display: none;
}
.img-fluid {
width: 100%;
height: auto;
}
.people-love-nextiva .w-css-reset[data-handle="thumbnail"],
.people-love-nextiva .w-css-reset[data-handle="bigPlayButton"] {
display: none !important;
}
.people-love-nextiva {
padding-bottom: 3rem;
width: 100%;
display: flex;
background: white;
max-width: 1200px;
position: relative;
}
.people-love-nextiva .container {
max-width: 100%;
padding-left: 36px;
padding-right: 36px;
}
.people-love-nextiva h2 {
font-size: 2.25rem;
line-height: 2.75rem;
font-weight: 900;
text-align: center;
margin-bottom: 2rem;
}
.video-sliders {
position: relative;
display: flex;
flex-flow: row;
}
.video-slider {
display: flex;
height: fit-content;
flex-direction: column;
align-items: center;
background: #ebeff5;
position: relative;
visibility: hidden;
opacity: 0;
display: none;
}
.video-sliders .video-slider.active {
visibility: visible;
opacity: 1;
display: flex;
}
@media (min-width: 1200px) {
.video-slider {
flex-direction: unset;
flex-flow: row;
align-items: center;
background: linear-gradient(
to right,
#ebeff5 0px,
#ebeff5 600px,
#fff 600px,
#fff 100%
);
max-width: 1200px;
}
}
.video-slider__video {
order: 1;
}
.video-slider__video .vid-ct {
min-height: 185px;
width: 85vw;
max-width: 100%;
}
@media (min-width: 768px) {
.people-love-nextiva {
padding-bottom: 5rem;
}
.video-slider__video .vid-ct {
min-height: 388px;
}
}
@media (min-width: 992px) {
.video-slider__video .vid-ct {
min-height: 432px;
}
}
@media (min-width: 1024px) {
.video-slider__video .vid-ct {
min-height: 432px;
}
}
@media (min-width: 1200px) {
.people-love-nextiva {
padding-bottom: 7rem;
}
.video-slider__video {
width: 840px;
order: 2;
}
}
.video-slider__content {
padding: 2rem;
order: 1;
height: fit-content;
display: flex;
flex-direction: column;
margin-right: auto;
}
@media (min-width: 1200px) {
.video-slider__content {
order: 1;
justify-content: center;
height: 600px;
}
}
.video-slider__content h6.kicker.kicker--light {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
}
.video-slider__content h4 {
margin-top: 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 900;
}
.video-slider__content p {
margin-top: 1.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
.video-slider__content .txt-link {
margin-top: 2rem;
}
.video-slider__nav {
display: none;
}
@media (min-width: 1200px) {
.video-slider__nav,
.nav-arrows {
width: 100%;
}
.video-slider__nav {
max-width: 1200px;
}
.video-sliders .video-slider__nav {
position: absolute;
bottom: 6.5rem;
left: 0;
padding: 2rem;
display: flex;
justify-content: space-between;
}
.video-sliders .video-slider__nav svg:first-child {
margin-right: 0.625rem;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="people-love-nextiva">
<div class="container no-pad">
<div class="row justify-content-center align-items-start">
<h2>People love Me.</h2>
<div class="video-sliders">
<div class="video-slider active">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb" id="video-1">
<img class="img-fluid vid-thumb-img lazy" src="https://via.placeholder.com/840x473.png?text=Image+One" alt="Alt Text">
</div>
</div>
</div>
<div class="video-slider__content">
<div class="video-slider__content-inner">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Company Name</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste, itaque.</p>
<span class="txt-link arrow-link">
<a href="#">Read more</a>
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
<div class="video-slider">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb" id="video-2">
<img class="img-fluid vid-thumb-img lazy" src="https://via.placeholder.com/840x473.png?text=Image+Two" alt="Alt Text">
</div>
</div>
</div>
<div class="video-slider__content">
<div class="video-slider__content-inner">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Another Company</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam est distinctio animi optio eum vero!</p>
<span class="txt-link arrow-link">
<a href="#">Read more</a>
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
<div class="video-slider">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb" id="video-3">
<img class="img-fluid vid-thumb-img lazy" src="https://via.placeholder.com/840x473.png?text=Image+Three" alt="Alt Text">
</div>
</div>
</div>
<div class="video-slider__content">
<div class="video-slider__content-inner">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Third Company</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis!</p>
<span class="txt-link arrow-link">
<a href="#">Read more</a>
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
<div class="video-slider__nav">
<div class="nav-arrows">
<svg id="left-arrow" class="arrow" fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<g stroke="#000a70" stroke-width="2.5">
<path d="m9 1-7 7 7 7"></path>
<path d="m2.5 8h13.5"></path>
</g>
</svg>
<svg id="right-arrow" class="arrow" fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<g stroke="#000A70" stroke-width="2.5">
<path d="m1 8h13.5"></path>
<path d="m8 15 7-7-7-7"></path>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</section>解决方案
我们不能使用display:none. 也许这里有一个小工作。
//handles slider
let toggleSlide = function () {
document.querySelectorAll(".video-slider.active");
this.classList.add("active");
this.nextElementSibling(".video-slider");
this.classList.add(".video-slider:first");
this.at(-1);
this.classList.add("active");
};
var clientHeight = document.getElementsByClassName('video-slider')[0].clientHeight;
document.getElementById("video-sliders").style.height = clientHeight+'px';
for (const control of document.querySelectorAll(".nav-arrows .arrow")) {
control.addEventListener("click", function () {
const slides = [...document.querySelectorAll(".video-slider")];
let index = slides.findIndex((slide) => slide.classList.contains("active"));
slides[index].classList.remove("active");
index =
(index + (control.id === "left-arrow" ? -1 : 1) + slides.length) %
slides.length;
slides[index].classList.add("active");
});
}
// handles Wistia
var firstPlay = false;
$(".people-love-nextiva .vid-ct").on("click", function () {
var videoId = "";
var videoNum = $(this).find(".vid-thumb").attr("id");
if (videoNum == "video-1") {
videoId = "2uzup7d1l3";
} else if (videoNum == "video-2") {
videoId = "h16fin8bfq";
} else if (videoNum == "video-3") {
videoId = "i0ijlogr4q";
}
if (!$(this).hasClass("played")) {
if (firstPlay == false) {
$(this).prepend('<script src="https://fast.wistia.com/assets/external/E-v1.js" async><\/script>');
firstPlay = true;
}
$(this).find(".vid-thumb").remove();
$(this).hide().prepend(
'<script src="https://fast.wistia.com/embed/medias/' +
videoId +
'.jsonp" async><\/script><div class="wistia_embed wistia_async_' +
videoId +
' videoFoam=true" style="width:100%;"> </div>'
).fadeIn(1250);
// Wistia JavaScript API calls
window._wq = window._wq || [];
// Pauses any currently playing video and plays specific video that was clicked
_wq.push(
{
id: "_all",
onReady: function (video) {
video.pause();
}
},
{
id: videoId,
onReady: function (video) {
video.play();
}
}
);
// Add class played so if statement above knows whether a vid-ct has already been clicked
$(this).addClass("played");
}
});::-webkit-scrollbar {
display: none;
}
.img-fluid {
width: 100%;
height: auto;
}
.people-love-nextiva .w-css-reset[data-handle="thumbnail"],
.people-love-nextiva .w-css-reset[data-handle="bigPlayButton"] {
display: none !important;
}
.people-love-nextiva {
padding-bottom: 3rem;
width: 100%;
display: flex;
background: white;
max-width: 1200px;
position: relative;
}
.people-love-nextiva .container {
max-width: 100%;
padding-left: 36px;
padding-right: 36px;
}
.people-love-nextiva h2 {
font-size: 2.25rem;
line-height: 2.75rem;
font-weight: 900;
text-align: center;
margin-bottom: 2rem;
}
.video-sliders {
position: relative;
display: flex;
flex-flow: row;
}
.video-slider {
display: flex;
height: fit-content;
flex-direction: column;
align-items: center;
background: #ebeff5;
position: relative;
visibility: hidden;
opacity: 0;
position: absolute;
left: 100%;
transition: 1.5s ease all;
}
.video-sliders .video-slider.active {
visibility: visible;
opacity: 1;
display: flex;
left: 0;
}
@media (min-width: 1200px) {
.video-slider {
flex-direction: unset;
flex-flow: row;
align-items: center;
background: linear-gradient(
to right,
#ebeff5 0px,
#ebeff5 600px,
#fff 600px,
#fff 100%
);
max-width: 1200px;
}
}
.video-slider__video {
order: 1;
}
.video-slider__video .vid-ct {
min-height: 185px;
width: 85vw;
max-width: 100%;
}
@media (min-width: 768px) {
.people-love-nextiva {
padding-bottom: 5rem;
}
.video-slider__video .vid-ct {
min-height: 388px;
}
}
@media (min-width: 992px) {
.video-slider__video .vid-ct {
min-height: 432px;
}
}
@media (min-width: 1024px) {
.video-slider__video .vid-ct {
min-height: 432px;
}
}
@media (min-width: 1200px) {
.people-love-nextiva {
padding-bottom: 7rem;
}
.video-slider__video {
width: 840px;
order: 2;
}
}
.video-slider__content {
padding: 2rem;
order: 1;
height: fit-content;
display: flex;
flex-direction: column;
margin-right: auto;
}
@media (min-width: 1200px) {
.video-slider__content {
order: 1;
justify-content: center;
height: 600px;
}
}
.video-slider__content h6.kicker.kicker--light {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
}
.video-slider__content h4 {
margin-top: 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 900;
}
.video-slider__content p {
margin-top: 1.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
.video-slider__content .txt-link {
margin-top: 2rem;
}
.video-slider__nav {
display: none;
}
@media (min-width: 1200px) {
.video-slider__nav,
.nav-arrows {
width: 100%;
}
.video-slider__nav {
max-width: 1200px;
}
.video-sliders .video-slider__nav {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
display: flex;
justify-content: space-between;
}
.video-sliders .video-slider__nav svg:first-child {
margin-right: 0.625rem;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="people-love-nextiva">
<div class="container no-pad">
<div class="row justify-content-center align-items-start">
<h2>People love Me.</h2>
<div class="video-sliders" id="video-sliders">
<div class="video-slider active">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb" id="video-1">
<img class="img-fluid vid-thumb-img lazy" src="https://via.placeholder.com/840x473.png?text=Image+One" alt="Alt Text">
</div>
</div>
</div>
<div class="video-slider__content">
<div class="video-slider__content-inner">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Company Name</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste, itaque.</p>
<span class="txt-link arrow-link">
<a href="#">Read more</a>
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
<div class="video-slider">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb" id="video-2">
<img class="img-fluid vid-thumb-img lazy" src="https://via.placeholder.com/840x473.png?text=Image+Two" alt="Alt Text">
</div>
</div>
</div>
<div class="video-slider__content">
<div class="video-slider__content-inner">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Another Company</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam est distinctio animi optio eum vero!</p>
<span class="txt-link arrow-link">
<a href="#">Read more</a>
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
<div class="video-slider">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb" id="video-3">
<img class="img-fluid vid-thumb-img lazy" src="https://via.placeholder.com/840x473.png?text=Image+Three" alt="Alt Text">
</div>
</div>
</div>
<div class="video-slider__content">
<div class="video-slider__content-inner">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Third Company</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis!</p>
<span class="txt-link arrow-link">
<a href="#">Read more</a>
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
<div class="video-slider__nav">
<div class="nav-arrows">
<svg id="left-arrow" class="arrow" fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<g stroke="#000a70" stroke-width="2.5">
<path d="m9 1-7 7 7 7"></path>
<path d="m2.5 8h13.5"></path>
</g>
</svg>
<svg id="right-arrow" class="arrow" fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<g stroke="#000A70" stroke-width="2.5">
<path d="m1 8h13.5"></path>
<path d="m8 15 7-7-7-7"></path>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</section>取而代之display:none的是隐藏非活动元素，我们可以使用position:absolute并设置opacity:0隐藏非活动元素。快乐编码。
推荐阅读
- javascript - 在 this.props.dispatch(push(path)) 上没有发生 React 转换
- javascript - 替代粘性位置？
- azure-devops - 为什么我在 Azure DevOps Build Pipeline 中的测试会运行两次？
- google-cloud-firestore - 是否可以在 Airflow 中使用 datastore_export_operator 导出 Firestore 备份？
- java - 打印具有相同值的变量名称
- css - 即使文本区域没有焦点，也能指示选定的文本
- github - 为分支中的每个提交在没有 vm 的情况下在 codeship 中运行命令
- java - 在Java中，一个类可以引用另一个包含它的类的实例吗？
- chat - Hangouts Chat：获取线程中的所有消息
- angular - 角度 6：在同一个组件中使用相同的 html 标记两次