Css transition not smooth - collapse, expand menu

Question

I have a menu set to max width and expand/collapse toggle. I use jquery toggle for this. But the transition that I used isn't working.

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

and I tried with jquery slide toggle slow. But it applies whole div.

What am I missing here?

Jsfiddle

Possible duplicate of [CSS transition auto height not working](https://stackoverflow.com/questions/13938460/css-transition-auto-height-not-working) — Kamalesh M. Talaviya, Jan 16 '19 at 06:29
(1) you are applying transtion to height but you are changing max-height (2) even if you do transtion on max-height you will need an initil value — Temani Afif, Jan 16 '19 at 09:09

score 1 · Accepted Answer · answered Jan 16 '19 at 06:20

Do you want to achieve something like this?

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

score 0 · Answer 2 · answered Jan 16 '19 at 06:15

try this with a pixel value to animate.

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

score 0 · Answer 3 · answered Jan 16 '19 at 06:18

0

you need below code see fiddle

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

answered Jan 16 '19 at 06:18

Rahul

4,294
1
10
12

I dont want to set .campervan-info-expand to max height. becase content will be bigger – Janath Jan 16 '19 at 06:22
you can't animate from 0 to auto using transitions you have to supply some numbers, if your content is too large then its better to give max0height like 1000px or something then it will adjust according to content – Rahul Jan 16 '19 at 06:30

Css transition not smooth - collapse, expand menu

3 Answers3