7
votes

Transition CSS pas lisse - réduire, développer le menu

J'ai un menu défini sur la largeur maximale et la bascule développer / réduire. J'utilise jquery toggle pour cela. Mais la transition que j'ai utilisée ne fonctionne pas.

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

et j'ai essayé avec jquery slide toggle slow. Mais il applique la division entière.

Que me manque-t-il ici?

Jsfiddle p >

jquery html css css-transitions

2 commentaires

Copie possible de Hauteur automatique de transition CSS ne fonctionne pas

(1) vous appliquez la transtion à la hauteur mais vous modifiez max-height (2) même si vous effectuez une transition sur max-height, vous aurez besoin d'une valeur initiale

3 Réponses :

0
votes

essayez ceci avec une valeur de pixel à animer.

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

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


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

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

0 commentaires

0
votes

vous avez besoin du code ci-dessous voir violon

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

2 commentaires

Je ne veux pas définir .campervan-info-expand à la hauteur maximale. car le contenu sera plus grand

vous ne pouvez pas animer de 0 à automatique en utilisant des transitions, vous devez fournir des nombres, si votre contenu est trop grand, il est préférable de donner une hauteur maximale comme 1000px ou quelque chose, alors il s'ajustera en fonction du contenu

1
votes

Souhaitez-vous réaliser quelque chose comme ça?

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

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

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

0 commentaires