Pertanyaan Transisi di layar: properti


Saat ini saya sedang merancang semacam menu 'mega dropdown' CSS - pada dasarnya hanya menu dropdown CSS-hanya normal, tetapi satu yang berisi berbagai jenis konten.

Saat ini, tampaknya Transisi CSS3 tidak berlaku untuk properti 'display', Anda tidak dapat melakukan transisi apa pun dari display: none untuk display: block (atau kombinasi apa pun).

Adakah yang bisa memikirkan cara untuk menu lapis kedua dari contoh di atas ke 'fade in' ketika seseorang mengarahkan kursor ke salah satu item menu tingkat atas?

Saya sadar bahwa Anda dapat menggunakan transisi di visibility: properti, tetapi saya tidak bisa memikirkan cara untuk memanfaatkannya secara efektif.

Saya juga mencoba menggunakan tinggi tetapi itu gagal total.

Saya juga sadar bahwa itu sepele untuk mencapai ini menggunakan JavaScript, tetapi saya ingin menantang diri sendiri untuk menggunakan CSS saja dan saya pikir saya akan sedikit lebih pendek.

Semua dan semua saran dipersilahkan.


1070
2017-07-25 22:52


asal


Jawaban:


Anda dapat menggabungkan dua transisi atau lebih, dan visibility adalah apa yang berguna saat ini.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(Jangan lupa awalan vendor ke transition milik)

Detail lebih lanjut ada di artikel ini


1023
2017-08-04 14:58



Anda perlu menyembunyikan elemen dengan cara lain agar ini berfungsi.

Saya mencapai efek dengan memposisikan keduanya <div>s benar-benar dan pengaturan yang tersembunyi untuk opacity: 0.

Jika Anda bahkan beralih display properti dari none untuk block, Transisi Anda pada elemen lain tidak akan terjadi.

Untuk mengatasi ini, selalu biarkan elemen menjadi display: block, tetapi sembunyikan elemen dengan menyesuaikan salah satu cara ini:

  1. Mengatur height untuk 0.
  2. Mengatur opacity untuk 0.
  3. Posisikan elemen di luar bingkai elemen lain yang memiliki overflow: hidden.

Kemungkinan ada lebih banyak solusi, tetapi Anda tidak dapat melakukan transisi jika Anda beralih elemen display: none. Misalnya, Anda dapat mencoba untuk mencoba sesuatu seperti ini:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

Tapi itu akan terjadi tidak kerja. Dari pengalaman saya, saya telah menemukan ini untuk tidak melakukan apa-apa.

Karena ini, Anda akan selalu perlu menjaga elemen display: block - tetapi Anda bisa melakukannya dengan melakukan sesuatu seperti ini:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

660
2017-07-26 04:20



Pada saat posting ini semua browser utama menonaktifkan transisi CSS jika Anda mencoba untuk mengubah display properti, tetapi animasi CSS masih berfungsi dengan baik sehingga kami dapat menggunakannya sebagai work-around.

Kode Contoh: -   (Anda dapat menerapkannya ke menu Anda) Demo

Tambahkan CSS berikut ke stylesheet Anda: -

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

Kemudian terapkan fadeIn animasi untuk anak pada orangtua hover: - (dan tentu saja diatur display: block)

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

203
2018-02-17 19:25



Saya menduga bahwa alasan transisi yang dinonaktifkan jika "display" diubah adalah karena tampilan apa yang sebenarnya. Itu benar tidak mengubah apa pun yang bisa dibayangkan menjadi animasi yang lancar.

"Display: none;" dan "visibility: hidden;" adalah dua sepenuhnya hal yang berbeda. Keduanya memiliki efek membuat elemen tidak terlihat, tetapi dengan "visibilitas: tersembunyi;" itu masih disajikan dalam tata letak, tetapi tidak terlihat begitu. Elemen yang tersembunyi masih membutuhkan ruang, dan masih dirender secara inline atau sebagai blok atau blok-inline atau tabel atau apa pun yang "menampilkan" elemen memberitahukannya untuk membuat sebagai, dan memakan ruang yang sesuai. Elemen lain lakukan tidak secara otomatis bergerak untuk menempati ruang itu. Elemen tersembunyi hanya tidak membuat piksel aktualnya ke output.

"Display: none" di sisi lain sebenarnya mencegah elemen dari rendering sepenuhnya. Itu tidak memakan waktu apa saja ruang tata letak. Elemen lain yang akan menempati sebagian atau seluruh ruang yang diambil oleh elemen ini sekarang menyesuaikan untuk menempati ruang tersebut, seolah-olah elemen tersebut hanya tidak ada sama sekali.

"Tampilan" bukan hanya atribut visual lainnya. Ini menetapkan seluruh mode render elemen, seperti apakah itu sebuah blok, sebaris, blok-inline, tabel, baris-tabel, sel-tabel, daftar-item, atau apa pun! Masing-masing memiliki konsekuensi tata letak yang sangat berbeda, dan tidak akan ada cara yang masuk akal untuk menganimasikan atau memulainya dengan lancar (coba bayangkan transisi yang mulus dari "blokir" menjadi "sebaris" atau sebaliknya, misalnya!).

Inilah sebabnya mengapa transisi dinonaktifkan jika tampilan berubah (bahkan jika perubahannya adalah ke atau dari "tidak ada" - "tidak ada" tidak hanya invisiblity, itu adalah mode rendering elemennya sendiri yang berarti tidak ada rendering sama sekali!),


54
2018-06-15 18:55



display bukan salah satu properti yang berfungsi sebagai transisi.

Lihat http://www.w3.org/TR/css3-transitions/#animatable-properties- untuk daftar properti yang dapat memiliki transisi yang diterapkan padanya.


41
2017-09-22 23:24



Saya tahu ini adalah pertanyaan yang sangat lama tetapi bagi orang yang melihat utas ini, Anda dapat menambahkan animasi kustom ke properti blok sekarang.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Demo

Dalam demo ini sub-menu berubah dari display:none untuk display:block dan masih berhasil memudar.


28
2017-07-29 20:51



Menurut W3C Working Draft 19 November 2013  display bukan sebuah properti animatable. Untung, visibility bersifat animatable. Anda dapat berantai transisi dengan transisi opacity (JSFiddle):

  • HTML:

    <a href="http://example.com" id="foo">Foo</a>
    <button id="hide-button">Hide</button>
    <button id="show-button">Show</button>
    
  • CSS:

    #foo {
        transition-property: visibility, opacity;
        transition-duration: 0s, 1s;
    }
    
    #foo.hidden {
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: 1s, 0s;
        transition-delay: 0s, 1s;
    }
    
  • JavaScript untuk pengujian:

    var foo = document.getElementById('foo');
    
    document.getElementById('hide-button').onclick = function () {
        foo.className = 'hidden';
    };
    
    document.getElementById('show-button').onclick = function () {
        foo.className = '';
    };
    

Perhatikan bahwa jika Anda hanya membuat tautan transparan, tanpa pengaturan visibility: hidden, maka itu akan tetap dapat diklik.


17
2018-02-02 14:59



Trik JavaScript saya yang rapi adalah untuk memisahkan seluruh skenario menjadi dua fungsi berbeda!

Untuk menyiapkan sesuatu, satu variabel global dideklarasikan dan satu pengendali event didefinisikan:

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

Kemudian, ketika menyembunyikan elemen, saya menggunakan sesuatu seperti ini:

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

Untuk memunculkan kembali elemen, saya melakukan sesuatu seperti ini:

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

Berhasil, sejauh ini!


12
2017-12-14 21:55