如何在点击时切换滑动滑块（向下滑动并向上滑动）

Question

我正在尝试在某些Slick滑块上获得平滑的向下滑动动画。

我需要滑块和“项目”按钮以动画形式在单击上述标题后以向下滑动的方式进行动画处理。

我在滑块/按钮容器在单击时确实向下滑动的地方（切换一个更改容器最大高度的类），但是滑块和按钮只是弹出视图而不会随着容器向下移动。

链接到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');
});

Answer 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 -->