Comment animer la hauteur avec transformation sans presser le contenu

Question

Dans mon projet, j'utilise jQuery slideUp() pour faire glisser un élément dans une liste de 200 éléments lorsque l'utilisateur clique sur un bouton. Cependant, les animations CSS en hauteur sont connues pour nécessiter une redistribution, ce qui entraîne des animations instables. L'animation fait partie intégrante de l'application et je suis prêt à faire beaucoup de travail pour la faire fonctionner et fonctionner de manière fluide.

J'ai décidé que CSS transform était la voie à suivre pour que cela fonctionne correctement car il est traité sur le GPU et sur certains navigateurs modernes, il est même hors du thread principal et le gros travail JS n'affecte pas les transformations. (J'ai un gros travail JS).

Je cherche un moyen d'utiliser CSS transition的巧妙解决方案：transform来复制jQuery slideUp，它只是为height属性设置动画。以下是我的尝试，但似乎 scale 和 translate Pas de synchronisation comme prévu.

$("button").on("click", function() {
  $(".collapsible").addClass("collapsed")
  setTimeout(function() {
    $(".collapsible").removeClass("collapsed")
  }, 5000);
});

.list-item {
  width: 400px;
  height: 100px;
  background-color: blue;
  margin-top: 10px;
  overflow-y: hidden;
}

.collapsible.collapsed .content {
  transition: transform 3s linear;
  transform: scale(1, 1) translate(0, -100%);
}

.collapsible.collapsed {
  transition: transform 3s linear;
  transform: translate(0, -50%) scale(1, 0);
}

.collapsible.collapsed ~ .list-item {
  transition: transform 3s linear;
  transform: translate(0, -100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<button>Collapse</button>
<div class="list-item collapsible">
  <div class="content">
    Just an example <br>
    Just an example <br>
    Just an example <br>
    Just an example <br>
    Just an example <br>
  </div>
</div>
<div class="list-item">
  
</div>
<div class="list-item">
  
</div>

J'ai un peu modifié les valeurs et je les ai rapprochées en leur ajoutant content 转换更改为 transform:scale(1, 3) translate(0, -50%);.

Il semble que j'ai été très près d'atteindre mon objectif, mais je n'ai jamais vraiment réussi. Existe-t-il des astuces toutes faites pour y parvenir ?

Exigences :

• De préférence sans JS
• Hors fil principal

Answer 1

Après quelques nuits de sommeil, j'ai trouvé une solution qui correspondait parfaitement à mes besoins. J'ai dû utiliser trois couches div 并确保内部两层设置为 height: 100%;。然后，我取消了 scale() 并使用 transform() en faisant glisser la couche du milieu vers le haut.

Cela correspond à mes exigences :

• En utilisant Transform(), il devrait fonctionner jusqu'à 60 ips sur GPU
• N'utilise pas Scale() pour compresser le contenu
• Le contenu disparaît de bas en haut comme jQuery SlideUp()
• Quelle que soit la hauteur de l'élément cible, les autres éléments ci-dessous glisseront vers le haut pour combler le vide
• Une fois l'animation déclenchée, aucun JS n'est plus impliqué

$("button").on("click", function() {
  const height = $(".collapsible").css("height");
  $(":root").css("--height", height);
  $(".collapsible").addClass("collapsed");
  setTimeout(function() {
    $(".collapsible").removeClass("collapsed");
  }, 4000);
});

:root {
  --height: unset;
}

.outer-container {
  width: 400px;
  height: fit-content;
  background-color: transparent;
  margin-top: 10px;
  overflow-y: hidden;
}

.inner-container {
  height: 100%;
  background-color: blue;
  overflow: hidden;
}

.content {
  height: 100%;
}

.collapsible.collapsed .inner-container {
  transition: transform 3s linear;
  transform: translate(0, -100%);
}

.collapsible.collapsed .content {
  transition: transform 3s linear;
  transform: translate(0, 100%);
}

.collapsible.collapsed ~ .outer-container {
  transition: transform 3s linear;
  transform: translate(0, calc((var(--height) * -1) - 10px));
}

.collapsible .inner-container {
  transition: transform .5s ease-in-out;
  transform: translate(0, 0);
}

.collapsible .content {
  transition: transform .5s ease-in-out;
  transform: translate(0, 0);
}

.collapsible ~ .outer-container {
  transition: transform .5s ease-in-out;
  transform: translate(0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<button>Collapse</button>
<div class="outer-container">
  <div class="inner-container">
    <div class="content">
      Just an example <br>
      Just an example <br>
      Just an example <br>
      Just an example <br>
    </div>
  </div>
</div>
<div class="outer-container collapsible">
  <div class="inner-container">
    <div class="content">
      Just an example <br>
      Just an example <br>
      Just an example <br>
      Just an example <br>
      Just an example <br>
    </div>
  </div>
</div>
<div class="outer-container">
  <div class="inner-container">
    <div class="content">
      Just an example <br>
      Just an example <br>
      Just an example <br>
    </div>
  </div>
</div>
<div class="outer-container">
  <div class="inner-container">
    <div class="content">
      Just an example <br>
      Just an example <br>
      Just an example <br>
      Just an example <br>
    </div>
  </div>
</div>