Dalam projek saya, saya telah menggunakan jQuery slideUp() untuk meluncur ke atas elemen dalam senarai 200 item apabila pengguna mengklik butang. Walau bagaimanapun, animasi ketinggian CSS diketahui memerlukan aliran semula, mengakibatkan animasi tidak stabil. Animasi adalah sebahagian daripada aplikasi dan saya bersedia melakukan banyak kerja untuk menjadikannya berfungsi dan berfungsi dengan lancar.
Saya memutuskan CSS transform ialah cara untuk menjadikannya berfungsi dengan lancar kerana ia diproses pada GPU dan pada sesetengah penyemak imbas moden, walaupun ia berada di luar urutan utama dan kerja JS yang berat tidak menjejaskan perubahan. (Saya mempunyai kerja JS yang berat).
Saya sedang mencari cara untuk menggunakan CSS transition的巧妙解决方案：transform来复制jQuery slideUp，它只是为height属性设置动画。以下是我的尝试，但似乎 scale 和 translate Tidak menyegerak seperti yang diharapkan.
$("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>
Saya mengubah suai nilai sedikit dan menjadikannya lebih dekat dengan menambahkan content 转换更改为 transform:scale(1, 3) translate(0, -50%); padanya.
Nampaknya saya semakin hampir untuk mencapai matlamat saya, tetapi tidak pernah berjaya. Adakah terdapat helah sedia untuk melakukan ini?
Syarat:
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Selepas beberapa malam tidur, saya menemui penyelesaian yang sesuai dengan keperluan saya dengan sempurna. Saya terpaksa menggunakan tiga lapisan
div并确保内部两层设置为height: 100%;。然后，我取消了scale()并使用transform()gelongsor lapisan tengah ke atas.Ini sesuai dengan keperluan saya:
Transform()ia sepatutnya berjalan sehingga 60fps pada GPUScale()untuk memampatkan kandunganSlideUp()$("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>