J'essaie de faire en sorte qu'un div se développe du haut de la page vers le bas. Lorsque les utilisateurs cliquent sur le bouton, l'animation démarre, le div sera masqué (hauteur 0 %) jusqu'à ce qu'il remplisse son contenu. J'ai essayé de le faire comme ça, mais rien de tout cela ne semble fonctionner.

CSS et HTML

<div class="container">
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
</div>    

<button type="button" id="expand">Expand</button>

.container{
    background:lightblue;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    display: block; 
    height:0px;
    overflow:hidden;
 }

http://jsfiddle.net/3hmvy278/

1
AbhiRam 14 mars 2019 à 07:56

2 réponses

Meilleure réponse

Essayez ceci. Je n'utilise aucune dépendance, seulement quelques JavaScript vanille et une transition CSS.

document.querySelector(".myButton").addEventListener("click", () => {
  document.querySelector(".container").classList.toggle("start");
});
.container {
  background: lightblue;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 1s height ease-in-out;
}

.container.start {
  height: 100vh;
}

/* Ignore */

body {
  margin: 0;
}

.myButton {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 100%;
}
<div class="container">
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
</div>

<button class="myButton">Toggle</button>
1
Andy Hoffman 16 mars 2019 à 18:18

Ici, j'ajoute la classe .height en cliquant sur le bouton.

.height {
  height: 100%
}
$(document).ready(function() {
  $("button").click(function() {
    $(".container").toggleClass("height")
  });
});
.container {
  background: lightblue;
  top: 0px;
  left: 0px;
  width: 100%;
  display: block;
  height: 0px;
  overflow: hidden;
}

.height {
  height: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
</div>

<button type="button" id="expand">Expand</button>

Ici, je bascule l'affichage de div en cliquant sur le bouton

$(document).ready(function() {
  $("button").click(function() {
    $(".container").toggle()
  });
});
.container {
  background: lightblue;
  top: 0px;
  left: 0px;
  width: 100%;
  display: block;
  height: 100%;
  overflow: hidden;
  display:none;
}

.height {
  height: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
</div>

<button type="button" id="expand">Expand</button>
0
Xenio Gracias 14 mars 2019 à 05:04