Css 过渡不流畅 - 折叠、展开菜单

Question

我有一个菜单设置为最大宽度和 expand/collapse 切换。我为此使用 jquery 切换。但是我使用的转换不起作用。

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

我试过 jquery 滑动切换很慢。但它适用于整个 div。

我在这里错过了什么？

Jsfiddle

Answer 1

试试用像素值制作动画。

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

Answer 2

你需要下面的代码见fiddle

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

Answer 3

你想实现这样的目标吗？

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

Css 过渡不流畅 - 折叠、展开菜单

Css transition not smooth - collapse, expand menu

html

css

jquery

css-transitions