Transisi CSS di Edge dan IE11 tidak berfungsi

Saya jarang mengalami masalah CSS, namun hal ini membuat saya bingung.

Dalam http://plnkr.co/i2Fxol ini, semuanya berfungsi persis seperti yang diharapkan di semua browser, dengan pengecualian IE10 dan 11 dan Edge sepenuhnya gagal menerapkan transisi css ke elemen beberapa, tidak semua. Dan tidak peduli seberapa sering saya melihatnya, saya tidak mengerti mengapa ia gagal di tempat-tempat tertentu. (CSS ditambahkan di sini tetapi perlu dilihat dalam konteksnya karena ini adalah tampilan yang sangat sederhana)

#navigation ul {
  display: block;
  list-style: none;
  overflow: hidden;
  transition: all .2s ease;
}

Pada dasarnya, mereka bersendawa ketika akordeon terbuka dan menu tersedia untuk diperluas dan dikontrak dalam 0,2 detik yang disebutkan. Semua transisi lainnya berfungsi.

Oh, dan sekarang ada cara saya menambahkan penutupan ke jalur svg dalam HTML5 hanya untuk menghapus peringatan yang sama sekali tidak berguna di IE dan Edge.

sunting

Ketinggian awal akordeon dikumpulkan berdasarkan beban dengan ini:

...
var initialHeights = document.getElementsByClassName("level-1");
var values = [];
for(var i = 0; initialHeights.length > i; i++){
  values.push(initialHeights[i].offsetHeight);
}
...

Mereka kemudian di-zero-kan sejalan dengan nilai-nilai yang disimpan dengan aman dalam array menggunakan:

function toZero(){
  for(i = 0; mainSubMenus.length > i; i++){
    mainSubMenus[i].setAttribute("style", "height:0;");
  }
}
toZero();

Hal ini memungkinkan penggunaan css untuk transisi antara ketinggian nol dan nilai yang diketahui.

otak kentut

Saya pikir mungkin hal berikut ini bisa menyembuhkan orang sakit:

mainSubMenus[i].style.height = 0;

Saya salah.


javascript css internet-explorer microsoft-edge
person Stuart Harding    schedule 27.07.2016    source sumber
comment
Apakah Anda menganimasikan elemen apa pun dari display: none hingga display: block?   -  person Ason    schedule 27.07.2016
comment
Tidak, tinggi. Ketinggian diambil dari beban ketika tinggi elemen diketahui sebelum disetel ke 0.   -  person Stuart Harding    schedule 27.07.2016
comment
Bisakah Anda lebih spesifik tentang animasi mana yang tidak berfungsi dengan baik? GIF yang membedakan perilaku Edge vs Chrome juga akan membantu; Anda bisa mendapatkan aplikasi hebat untuk ini di screentogif.codeplex.com.   -  person Sampson    schedule 27.07.2016
comment
Edge adalah yang ini, dan Chrome yang ini. Anda akan melihat di Edge bahwa transisi akordeon untuk memperluas dan menciutkan terjadi secara instan, sedangkan transisi di Chrome (dan yang lainnya kecuali IE) bersifat lancar. Itulah satu-satunya animasi yang tidak diputar sesuai harapan. Semua yang lain berfungsi seperti yang diharapkan.   -  person Stuart Harding    schedule 28.07.2016

Jawaban (1)


arrow_upward
0
arrow_downward

Saya yakin masalahnya di sini adalah kurangnya ketinggian awal. Jika Anda menggilir elemen, dan menyetel tingginya sama dengan gaya tinggi yang dihitung, Anda kemudian dapat menggunakan gaya collapse untuk mengganti tingginya menjadi 0px, sehingga memicu transisi antara dua angka eksplisit.

var box = document.querySelector( ".box" );

// Set the box's initial height to its computed height
box.style.height = window.getComputedStyle( box ).height;

// Hide the box
box.classList.add( "collapsed" );

// Click will toggle a "collapsed" class on the box
document.addEventListener( "click", e => box.classList.toggle( "collapsed" ) )
.box {
  width: 100px;
  overflow: hidden;
  border: 1px solid #000;
  transition: all .2s ease;
}

.collapsed {
  height: 0!important;
}
<ul class="box">
  <li>Hello</li>
  <li>World</li>
</ul>

person Sampson    schedule 28.07.2016
comment
Ya, saya memikirkan hal itu. Ketinggiannya diketahui saat halaman dimuat dan disimpan di memori. Mereka kemudian dimasukkan ke dalam atribut style pada klik var initialHeights = document.getElementsByClassName("level-1"); var values = []; for(var i = 0; initialHeights.length > i; i++){ values.push(initialHeights[i].offsetHeight); }. Saya juga memerlukan kelas yang diperluas diterapkan dan dihapus pada saat yang sama saat kelas yang diciutkan dihapus dan ditambahkan. Saya memang menggunakan toggle(), tetapi memilih metode elemen.classList.add() dan elemen.classList(hapus) yang lebih bertele-tele dan akurat. Saya akan mencoba metode Anda dan kembali. - person Stuart Harding; 29.07.2016
comment
Saya mencobanya dan itu berhasil sampai saya menambahkan sub-akordeon ke keributan dan semuanya berantakan dengan ketinggian yang tidak dihormati, jadi saya kembali ke versi asli mengisi array dengan ketinggian awal. Pencarian saya berlanjut dan saya akan memperbarui plunk setelah saya puas dengan apa yang saya dapatkan. - person Stuart Harding; 12.08.2016
comment
@StuartHarding Silakan bagikan markup yang ingin Anda gunakan, dan saya akan dengan senang hati merevisi jawaban saya untuk mengakomodasi, sesuai kemampuan terbaik saya. - person Sampson; 12.08.2016
comment
Kunjungi petik ini. Semua hal ada di sana dengan beberapa peningkatan lagi yang dilakukan karena ini membuat CSS jeleknya di IE tidak berperilaku buruk. - person Stuart Harding; 15.08.2016
comment
Namun harus saya katakan, mungkin saja mesin saya tidak berfungsi dengan benar. Saya memiliki satu mesin Windows yang menjalankan Win10 dan empat Mac dengan berbagai OS, jadi jika berfungsi di tempat lain, saya dengan senang hati membiarkannya gagal karena kegagalan laptop Windows saya. Alasan saya mengatakan ini adalah karena menu bekerja di Parallels kembali ke IE10 (jelas, IE9 akan gagal dalam menganimasikan css), tapi itu mungkin sebuah kebetulan. - person Stuart Harding; 15.08.2016
comment
@StuartHarding Plunk terbaru ini tampaknya berfungsi di Edge tanpa masalah. - person Sampson; 15.08.2016
comment
:-/ Jadi, kemungkinan besar kasusnya mengejar ekorku sendiri. Saya akan menandai ini sebagai jawaban yang benar karena membuat saya berpikir tentang bagaimana ketinggian digunakan dengan cara yang sedikit berbeda dari saya dan mungkin juga berguna bagi orang lain. Terima kasih, @Sampson. - person Stuart Harding; 16.08.2016