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

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

如果你想在不使用@keyframes的情况下通过css为高度设置动画，你可能需要更改一些内容。看看下面是否有你想要的幻灯片，请尝试在全屏幕中查看。

$('.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 -->