javascript - kesan peralihan vue susunan peralihan css nama kelas

Question

Reka bentuk peralihan untuk elemen Kesan yang ideal ialah ketinggian meningkat apabila ia muncul dan berkurangan apabila ia hilang.
Kod yang direka adalah seperti berikut:

.collapse-enter-active, 
.collapse-leave-active {
  transition: height .5s;
}
.collapse-enter, 
.collapse-leave-active {
  height: 0;
}
.collapse-leave {
  height: 100px;
} 
.collapse-enter-active {
  height: 100px;
}

Apabila elemen hasil muncul, ketinggian terus mencapai 100px, dan apabila ia hilang, ia adalah perkara biasa

.collapse-enter-active, 
.collapse-leave-active {
  transition: height .5s;
}
.collapse-enter-active {
  height: 100px;
}
.collapse-enter, 
.collapse-leave-active {
  height: 0;
}
.collapse-leave {
  height: 100px;
}

Masalahnya selesai Saya tidak faham mengapa pesanan mempunyai kesan bukankah kesan peralihan dicapai dengan menukar css, bukan?

Anda boleh klik untuk melihat jsbin untuk kesan tertentu

Answer 1

Jawapan

@CRIMX telah menjelaskan pada asasnya, kedua-dua kelas masuk dan masuk aktif akan wujud pada elemen animasi pada masa yang sama dalam bingkai pertama, dan kemudian animasi akan dilaksanakan dengan mengalih keluar kelas masuk daripada kelas aktif tidak boleh dikuatkuasakan terlebih dahulu.

Walaupun kaedah dua kelas sudah cukup untuk melengkapkan animasi, ia sebenarnya tidak mudah difahami, jadi vue 2.1.8 mula menambah nama kelas kepada, yang boleh memisahkan keadaan akhir animasi daripada kelas aktif, menjadikannya lebih mudah untuk memahami dan mengelak daripada menjana isu liputan Sequential.

Answer 2

Apabila elemen dimasukkan, v-enter dan v-enter-active adalah berkesan pada masa yang sama Yang pertama dikeluarkan dalam bingkai seterusnya dan yang terakhir dikeluarkan selepas animasi selesai. Jadi v-enter-active hendaklah ditulis dahulu. Begitu juga dengan cuti.

Answer 3

Ini betul-betul pelik. Lain kali saya menulis aktif, saya akan menulisnya di hadapan dan menunggu pakar untuk menerangkannya

Answer 4

Anda boleh lihat penjelasan yang diberikan di laman web rasmi, yang sangat terperinci: https://cn.vuejs.org/v2/guide/transitions.html#过渡的-CSS-类名