Saya memiliki lebih sedikit file yang menyembunyikan dan menampilkan elemen seperti berikut:

.cmp-accordion__panel {
      &--hidden {
      display: none;
   }

   &--expanded {
     display: block;
     -webkit-animation: slide-down 0.5s ease-out;
     -moz-animation: slide-down 0.5s ease-out;
  }
}


@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-5%);
 }
100% {
  opacity: 1;
  -webkit-transform: translateY(0);
   }     
}

@-moz-keyframes slide-down {
0% {
  opacity: 0;
  -moz-transform: translateY(-5%);
  }
  100% {
   opacity: 1;
  -moz-transform: translateY(0);
   }
}

Dalam JavaScript saya, saya mengganti nama kelas elemen antara "cmp-accordion__panel--hidden" dan "cmp-accordion__panel--expanded" jika acara dipicu. Saya menggunakan keyframe dan opacity untuk menganimasikan transisi dari "display:none" ke "display:block".

Namun, ketika saya beralih dari "display:block" ke "display:none" untuk menyembunyikan elemen, efeknya terjadi INSTAN. Apa yang harus saya tambahkan untuk menghidupkan persembunyian?

1
Rongeegee 3 Februari 2020, 02:29

2 jawaban

Jawaban Terbaik

Anda tidak dapat menganimasikan atau bertransisi dari display: block; ke display: none;, jadi Anda harus menghapus ini jika ingin menganimasikannya.

Untuk memastikannya memudar dan dihapus, Anda harus menganimasikan atribut visibilty dan opacity.

Atau jika Anda menggunakan jQuery, Anda dapat menggunakan fungsi .fadeOut().

MDN - Visibilitas CSS

jQuery - fadeOut()

0
Connor 2 Februari 2020, 23:38

Seperti yang sudah dikatakan, tidak mungkin menganimasikan atau transisi dari display:block; ke display: none; tetapi ini dapat disimulasikan dengan cara lain dan tidak perlu menggunakan animasi CSS, cukup transisi CSS (selain itu, tidak diperlukan lagi untuk menggunakan awalan vendor untuk mendeklarasikan transisi atau animasi).

Silakan, lihat contoh kerja ini:

HTML (Saya menyisipkan konten palsu untuk membuat elemen dengan tinggi yang relatif besar)

<div class="cmp-accordion__panel--expanded">
  b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>

KURANG

[class*="cmp-accordion__panel"] {
  border:solid 1px red;
  overflow:hidden;
  transition:opacity 0.3s ease-out, max-height 0.8s ease-out;
}

.cmp-accordion__panel {
   &--hidden {
      max-height:0;
      opacity:0;  
   }

   &--expanded {
     opacity:1;
     max-height:1000px;
  }
}

Harap dicatat bahwa, berkat pemilih nilai parsial atribut Saya juga menambahkan beberapa aturan yang berlaku untuk baik *--hidden dan *--expanded kelas (saya pribadi lebih suka kelas umum dan tambahan yang kedua dalam beberapa kasus, daripada beralih di antara dua, tapi saya tidak ingin mengubah terlalu banyak pendekatan Anda).

Aturan utamanya adalah beralih di antara dua nilai properti max-height, dari nilai 0 ke nilai "cukup besar" lainnya. Jika Anda mengetahui ketinggian akhir elemen secara efektif, Anda dapat menggunakan juga properti height, tetapi dalam kasus konten dinamis, max-height berhasil.

Harap perhatikan juga keberadaan overflow:hidden; yang diterapkan pada kedua kelas, untuk mensimulasikan perubahan ketinggian.

Terakhir, efek animasi hanya bergantung pada transisi CSS yang diterapkan pada properti opacity dan max-height, dengan pengaturan waktu yang berbeda untuk meningkatkan efek.

1
Luca Detomi 20 Februari 2020, 10:10