我正努力尝试在某些Slick滑块上获得平滑的滑动动画。
我需要滑块和＆＃34;项目＆＃34;单击上述标题时按钮以向下滑动动画。
我有滑块/按钮容器在点击时向下滑动的位置（切换一个更改容器最大高度的类），但滑块和按钮排序只是弹出视图而不是动画放下容器。
指向codepen的链接：https://codepen.io/Finches/pen/jYrzWv
任何有助于顺利过渡到此过渡的帮助？代码段......
.service-content-wrapper {
margin: 0 auto;
width: 100%;
visibility: hidden;
margin-bottom: 25px;
max-height: 0;
transition: max-height 2s;
}
.accordion-content-wrapper {
background: blue;
}
.active {
max-height: 1000px;
visibility: visible;
}
-
$('.title-box').click(function() {
$(this).siblings('.service-content-wrapper').toggleClass('active');
});
答案 0 :(得分：1)
如果您想通过css为高度设置动画而不使用@keyframes，则可能需要更改一些内容。看看下面是否有您想要的幻灯片，请尝试在全屏幕中查看。
$('.accordion-content-wrapper').slick({
prevArrow: false
});
$('.title-box').click(function() {
$(this).siblings('.service-content-wrapper').toggleClass('active');
});body {
font-family: 'Open Sans', sans-serif;
}
.title-box h1 {
margin: 0 auto;
text-align: center;
padding: 25px;
}
.service-content-wrapper {
margin: 0 auto;
width: 100%;
/* margin-bottom: 25px; */
height: 0px;
position: relative;
transition: 1s;
}
.accordion-content-wrapper {
background: blue;
}
.active {
transition: 1s;
height: 350px;
}
.slide-1,
.slide-2 {
width: 100%;
}
.slick-next {
position: absolute;
bottom: 10px;
right: 10px;
}
.title-box {
background: gray;
width: 100%;
z-index: 9999 !important;
position: relative;
}
.service-container {
/* background: pink; */
margin: 10px;
overflow: hidden;
position: relative;
}
.page-container {
padding: 25px;
}
.btn {
padding: 15px;
background: salmon;
text-align: center;
text-transform: uppercase;
font-weight: 900;
margin-top: 15px;
margin-bottom: 15px;
}
.btn:hover {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="row page-container">
<div class="col-md-4 col-xs-12 services-column">
<div class="service-container">
<div class="title-box col-md-12">
<h1>HEAVY CIVIL</h1>
</div>
<div class="service-content-wrapper">
<div class="accordion-content-wrapper col-md-12">
<div class="slide-1 col-md-12">
This is test content.
</div>
<!-- slide-1 -->
<div class="slide-2 col-md-12">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
<p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<!-- slide-2 -->
</div>
<!-- accordion-content-wrapper -->
<div class="btn col-md-12">PROJECTS</div>
</div>
<!-- service-content-wrapper -->
</div>
<!-- service-container -->
<div class="service-container">
<div class="title-box col-md-12">
<h1>HEAVY CIVIL</h1>
</div>
<div class="service-content-wrapper">
<div class="accordion-content-wrapper col-md-12">
<div class="slide-1 col-md-12">
This is test content.
</div>
<!-- slide-1 -->
<div class="slide-2 col-md-12">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
<p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<!-- slide-2 -->
</div>
<!-- accordion-content-wrapper -->
<div class="btn col-md-12">PROJECTS</div>
</div>
<!-- service-content-wrapper -->
</div>
<!-- service-container -->
</div>
<!-- col-md-4 -->
<div class="col-md-4 col-xs-12 services-column">
<div class="service-container">
<div class="title-box col-md-12">
<h1>HEAVY CIVIL</h1>
</div>
<div class="service-content-wrapper">
<div class="accordion-content-wrapper col-md-12">
<div class="slide-1 col-md-12">
This is test content.
</div>
<!-- slide-1 -->
<div class="slide-2 col-md-12">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
<p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<!-- slide-2 -->
</div>
<!-- accordion-content-wrapper -->
<div class="btn col-md-12">PROJECTS</div>
</div>
<!-- service-content-wrapper -->
</div>
<!-- service-container -->
<div class="service-container">
<div class="title-box col-md-12">
<h1>HEAVY CIVIL</h1>
</div>
<div class="service-content-wrapper">
<div class="accordion-content-wrapper col-md-12">
<div class="slide-1 col-md-12">
This is test content.
</div>
<!-- slide-1 -->
<div class="slide-2 col-md-12">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
<p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<!-- slide-2 -->
</div>
<!-- accordion-content-wrapper -->
<div class="btn col-md-12">PROJECTS</div>
</div>
<!-- service-content-wrapper -->
</div>
<!-- service-container -->
</div>
<!-- col-md-4 -->
<div class="col-md-4 col-xs-12 services-column">
<div class="service-container">
<div class="title-box col-md-12">
<h1>HEAVY CIVIL</h1>
</div>
<div class="service-content-wrapper">
<div class="accordion-content-wrapper col-md-12">
<div class="slide-1 col-md-12">
This is test content.
</div>
<!-- slide-1 -->
<div class="slide-2 col-md-12">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
<p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<!-- slide-2 -->
</div>
<!-- accordion-content-wrapper -->
<div class="btn col-md-12">PROJECTS</div>
</div>
<!-- service-content-wrapper -->
</div>
<!-- service-container -->
<div class="service-container">
<div class="title-box col-md-12">
<h1>HEAVY CIVIL</h1>
</div>
<div class="service-content-wrapper">
<div class="accordion-content-wrapper col-md-12">
<div class="slide-1 col-md-12">
This is test content.
</div>
<!-- slide-1 -->
<div class="slide-2 col-md-12">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
<p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<!-- slide-2 -->
</div>
<!-- accordion-content-wrapper -->
<div class="btn col-md-12">PROJECTS</div>
</div>
<!-- service-content-wrapper -->
</div>
<!-- service-container -->
</div>
<!-- col-md-4 -->
</div>
<!-- row -->