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 :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 :
Transform(), il devrait fonctionner jusqu'à 60 ips sur GPUScale()pour compresser le contenuSlideUp()$("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>