如何在點擊時切換滑動滑塊（向下滑動並向上滑動）

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