2
votes

Transformez l'échelle et ajustez le contenu extérieur

J'ai un div et j'en ai besoin pour évoluer entre 0 et 1 , mais le contenu ultérieur reste au même endroit. Comment augmenter le div et modifier le contenu qui l'entoure?
Lien JSFiddle

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  transform: scaleY(0);
}

.div1 {
  transform: scaleY(1);
  background-color: royalblue;
  padding: 15px;
  transform: scaleY(1);
  transition: transform 2s;
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  height: 200px;
}

html css css-transitions

4 commentaires

Quelle division essayez-vous de changer, qu'est-ce que vous essayez de transformer et qu'est-ce qui ne fonctionne pas comme il se doit? Veuillez donner plus de détails à votre question.

DIV2 doit se déplacer lorsque DIV1 est mis à l'échelle entre 0 et 1

jsfiddle.net/1450qfjh/1

@JoykalInfotech Il n'y a pas de transition entre display: inline-block et display: none .

3 Réponses :

0
votes

Une solution serait d'utiliser max-height pour transformer votre div au lieu de la propriété transform .

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

.transform {
  background-color: slategray;

}

.transform:hover~.div1 {
  max-height: 0;
}

.transform:hover~.div1 img {
  max-height: 0;
}

.div1 {
  max-height: 600px;
  background-color: royalblue;
  padding: 15px;
  transition: max-height 0.5s;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
 max-height: 200px;
 transition: max-height 0.6s;
}

6 commentaires

Je pense que la partie bleue qui apparaît encore, serait un problème pour OP.

Oui, c'est du rembourrage. Il pourrait également être supprimé.

Le problème de l'utilisation de la hauteur est que si j'ai du contenu au-dessus, l'animation monte et non pas, c'est pourquoi je suis passé à l'échelle de transformation. Voir un exemple jsfiddle.net/35xj4kzw

D'accord, je vois. Mais cela n'arriverait-il pas quoi qu'il arrive si vous parveniez à vous débarrasser de l'espace (c'est-à-dire garder div2 à côté de div1)?

@JacobLockard je pense que c'est juste parce qu'ils n'ont pas d'espace en dessous, si c'est la dernière chose sur la page - donc ça va forcément tomber. S'il y a du contenu supplémentaire ci-dessous, il augmentera. Comme ceci: jsfiddle.net/90dvfokj

Ouais. Ce que je voulais dire, c'était: même si vous pouviez obtenir une transformation pour ne pas garder l'espace supplémentaire entre les div , vous auriez toujours le même problème.

0
votes

Vous pouvez changer transform: scaleY (0); en height: 0px; . Cela devrait vous donner le même effet mais déplacez également la div ci-dessous. J'ai créé un exemple qui peut vous aider ci-dessous.

<div style="margin-top: 150px">

</div>

<div class="container">
  <div class="transform">TRANSFORM</div>
  <div class="div1">
    <img src="https://via.placeholder.com/500">
  </div>
  <div class="div2">
    <span>TEXT</span>
  </div>
</div>

<div style="margin-top: 200px">

</div>

.container {
  display: flex;
  flex-direction: column;
}

.transform {
  background-color: slategray;
}

.div1 {
  background-color: royalblue;
  padding: 15px;
  transition: all 2s;
  height: 200px;
}

.transform:hover~.div1 {
  height: 0px;
  padding: 0px;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  height: 100%;
}

2 commentaires

@gSalzmann Si vous avez aussi de l'espace en dessous, alors il montera toujours - c'est juste parce qu'il est en bas. Voir ceci: jsfiddle.net/90dvfokj

2
votes

Si vous modifiez la hauteur de .div1 au lieu de la mettre à l'échelle, le reste de la page s'y adaptera.

<div style="margin-top: 300px">TEXT</div>
<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  transform: scaleY(0);
}

.transform:hover~.div2 {
  top:-230px;             /* Move div2 up by the height+padding of div1 */
}

.div1 {
  transform: scaleY(1);
  background-color: royalblue;
  padding: 15px;
  transform: scaleY(1);
  transition: transform 2s;
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
  position: relative;  /* use relative positioning */
  top: 0;              /* Initial position is where it normally is */
  transition: top 2s;
}

img {
  height: 200px;
  vertical-align:top;
}

J'espère que cela vous aidera!

Modifier: les commentaires du PO ont changé le problème maintenant, voici donc un nouvel extrait de code qui résout ce problème.

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  height:0; padding-top:0; padding-bottom:0; /* need to adjust height and padding */
}

.div1 {
  background-color: royalblue;
  padding: 15px;
  height: 200px;
  transition: padding-top 2s, padding-bottom 2s, height 2s; /* animate the padding too */
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  width:200px; height: 100%; vertical-align:top; /* and some adjustments here */
}

3 commentaires

@gSalzmann OK, j'ai ajouté une autre solution basée sur nos nouvelles informations. À quoi ressemble l'extrait du bas?

Animer l'autre DIV, oui, ça semble intéressant. Je vais mettre en œuvre avec mon projet