Bagaimana untuk menghidupkan ketinggian dengan mengubah tanpa memerah kandungan

Question

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:

• Sebaik-baiknya tanpa JS
• Di luar utas utama

Answer 1

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:

• Menggunakan Transform() ia sepatutnya berjalan sehingga 60fps pada GPU
• Tidak menggunakan Scale() untuk memampatkan kandungan
• Kandungan hilang dari bawah ke atas seperti jQuery SlideUp()
• Tidak kira ketinggian elemen sasaran, elemen lain di bawah akan meluncur ke atas untuk mengisi jurang
• Setelah animasi dicetuskan, tiada JS yang terlibat lagi

$("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>