CSS过渡效果不流畅 - 折叠、展开菜单

Question

我有一个菜单，设置了最大宽度和展开/折叠开关。我使用jQuery toggle来实现。但是我使用的过渡效果不起作用。

 .campervan-info-list {
   transition: height 1s ease;
 }

我尝试使用jquery slide toggle slow，但它应用到整个div。

我错过了什么？

Jsfiddle

- Janath

---

可能是CSS过渡自适应高度不起作用的重复问题。 - Kamalesh M. Talaviya

(1) 你正在对高度应用转换，但是你在更改最大高度。 (2) 即使你在最大高度上应用转换，你仍需要一个初始值。 - Temani Afif

Answer 1

你想要实现类似这样的效果吗？

  $('.van-page-read-more').click( function() {
    $(".campervan-info-list").animate({height: "220px"},500);
} );

.campervan-info-expand{
  height: 50px;
  overflow: hidden;
  transition: height 1s ease;
}

<div class="campervan-info-list campervan-info-expand">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, orci sed faucibus semper, ante risus auctor ligula, ultricies cursus odio nulla ac leo. Vivamus auctor volutpat porta. Morbi venenatis luctus turpis, quis laoreet ante bibendum sit amet. Aliquam vel massa sed orci gravid
  
  <br>
  
  <br>lectus id commodo. Aliquam ultricies justo et magna porttitor tincidunt. Nam ut condimentum turpis. Praesent rutrum ut turpis non finibus. In eu egestas augue, vitae viverra mi. Nunc molestie enim est, luctus volutpat ante laoreet interdum. Proin id fermentum magna. Sed semper mauris urna, non pulvinar quam rhoncus ut. Integer ultrices sodales odio vitae pharetra. Duis a enim nec velit rhoncus pharetra eu a sapien.

Donec sem enim, ornare vitae tellus eu, porta ultricies ligula. Suspendisse in nisi a metus sagittis iaculis. Nullam eu eros eu urna
<br>

lacinia lacinia. Quisque pharetra metus neque, in venenatis sem scelerisque eu. Proin blandit, purus vel volutpat scelerisque, ex orci varius nunc, ut consequat turpis mauris non magna. Mauris pellentesque mauris mi, e
</div>
<br>
<a class="van-page-read-more">Read more</a>

- mansoureh.hedayat

Answer 2

尝试使用像素值进行动画处理。

  $('.van-page-read-more').click( function() {
    $(".campervan-info-list").toggleClass("campervan-info-expand");
} );

 .campervan-info-list {
   height: 200px;
   width: 100%;
   float: left;
   transition: all 1s ease-in;
   overflow: hidden;
 }


.campervan-info-expand{
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campervan-info-list campervan-info-expand">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, orci sed faucibus semper, ante risus auctor ligula, ultricies cursus odio nulla ac leo. Vivamus auctor volutpat porta. Morbi venenatis luctus turpis, quis laoreet ante bibendum sit amet. Aliquam vel massa sed orci gravid
  
  <br>
  
  <br>lectus id commodo. Aliquam ultricies justo et magna porttitor tincidunt. Nam ut condimentum turpis. Praesent rutrum ut turpis non finibus. In eu egestas augue, vitae viverra mi. Nunc molestie enim est, luctus volutpat ante laoreet interdum. Proin id fermentum magna. Sed semper mauris urna, non pulvinar quam rhoncus ut. Integer ultrices sodales odio vitae pharetra. Duis a enim nec velit rhoncus pharetra eu a sapien.

Donec sem enim, ornare vitae tellus eu, porta ultricies ligula. Suspendisse in nisi a metus sagittis iaculis. Nullam eu eros eu urna
<br>

lacinia lacinia. Quisque pharetra metus neque, in venenatis sem scelerisque eu. Proin blandit, purus vel volutpat scelerisque, ex orci varius nunc, ut consequat turpis mauris non magna. Mauris pellentesque mauris mi, e
</div>
<br>
<a class="van-page-read-more">Read more</a>

- Pons Purushothaman

Answer 3

你需要以下代码，请查看fiddle

 .campervan-info-list {
   max-height: 150px;
   transition: max-height 1s ease-in;
   overflow: hidden;
 }
.campervan-info-expand{
  max-height: 50px;
}

- Rahul

---

我不想将 .campervan-info-expand 的最大高度设置为最大值，因为内容会变得更大。 - Janath

你不能使用过渡效果从0到自动来实现动画效果，必须提供一些数字。如果你的内容太大，最好给出max-height，例如1000像素之类的值，然后它会根据内容进行调整。 - Rahul