Saat ini saya sedang mendesain menu 'mega dropdown' CSS - pada dasarnya menu dropdown khusus CSS saja, tetapi yang berisi berbagai jenis konten.

Saat ini, tampaknya transisi CSS 3 tidak berlaku untuk properti 'display' , yaitu, Anda tidak dapat melakukan transisi apa pun dari display: nonekedisplay: block (atau kombinasi apa pun).

Apakah ada cara untuk menu tingkat kedua dari contoh di atas untuk 'memudar' ketika seseorang melayang di atas salah satu item menu tingkat atas?

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

Saya juga sudah mencoba menggunakan ketinggian, tapi itu gagal total.

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

Anda dapat menggabungkan dua transisi atau lebih, dan visibilityapa 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 transitionproperti.)

Rincian lebih lanjut ada di artikel ini .

Anda perlu menyembunyikan elemen dengan cara lain untuk membuatnya berfungsi.

Saya menyelesaikan efeknya dengan memposisikan keduanya secara <div>absolut dan mengatur yang tersembunyi opacity: 0.

Jika Anda bahkan mengalihkan displayproperti dari noneke block, transisi Anda pada elemen lain tidak akan terjadi.

Untuk mengatasinya, selalu izinkan elemen tersebut berada display: block, tetapi sembunyikan elemen tersebut dengan menyesuaikan salah satu dari sarana ini:

1. Setel heightke 0.
2. Setel opacityke 0.
3. Posisikan elemen di luar bingkai elemen lain yang dimiliki overflow: hidden.

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

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

Tetapi itu tidak akan berhasil. Dari pengalaman saya, saya menemukan ini tidak melakukan apa-apa.

Karena itu, Anda harus selalu menjaga elemen display: block- tetapi Anda bisa menyiasatinya dengan melakukan sesuatu seperti ini:

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

Pada saat posting ini, semua browser utama menonaktifkan transisi CSS jika Anda mencoba mengubah displayproperti, tetapi animasi CSS masih berfungsi dengan baik sehingga kami dapat menggunakannya sebagai solusi.

Contoh Kode (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 fadeInanimasi ke anak pada hover orang tua (dan tentu saja diatur display: block):

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

Pembaruan 2019 - Metode yang juga mendukung fading out:

(Diperlukan beberapa kode JavaScript)

// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
  if (e.animationName === 'fade-in') {
      e.target.classList.add('did-fade-in');
  }
});

document.addEventListener('animationend', function (e) {
  if (e.animationName === 'fade-out') {
      e.target.classList.remove('did-fade-in');
   }
});

div {
    border: 5px solid;
    padding: 10px;
}

div:hover {
    border-color: red;
}

.parent .child {
  display: none;
}

.parent:hover .child {
  display: block;
  animation: fade-in 1s;
}

.parent:not(:hover) .child.did-fade-in {
  display: block;
  animation: fade-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>

Saya menduga bahwa alasan transisi dinonaktifkan jika displaydiubah adalah karena tampilan yang sebenarnya dilakukan. Itu tidak mengubah apa pun yang mungkin bisa dianimasikan dengan lancar.

display: none;dan visibility: hidden;dua hal yang sama sekali berbeda.
Keduanya memang memiliki efek membuat elemen tidak terlihat, tetapi dengan visibility: hidden;itu masih ditampilkan dalam tata letak, tetapi tidak tampak begitu.
Elemen tersembunyi masih membutuhkan ruang, dan masih dirender sebaris atau sebagai blok atau blok-sebaris atau tabel atau apa pun displayelemen yang memerintahkannya untuk dirender, dan mengambil ruang yang sesuai.
Elemen-elemen lain tidak secara otomatis bergerak untuk menempati ruang itu. Elemen tersembunyi tidak membuat piksel aktualnya menjadi output.

display: nonedi sisi lain sebenarnya mencegah elemen dari rendering sepenuhnya .
Tidak memakan ruang tata letak apa pun .
Elemen-elemen lain yang akan menempati sebagian atau seluruh ruang yang diambil oleh elemen ini sekarang menyesuaikan diri untuk menempati ruang itu, seolah-olah elemen itu sama sekali tidak ada sama sekali .

displaybukan hanya atribut visual.
Ini menetapkan seluruh modus render elemen, seperti apakah itu block, inline, inline-block, table, table-row, table-cell, list-item, atau apa pun!
Masing-masing memiliki konsekuensi tata letak yang sangat berbeda, dan tidak akan ada cara yang masuk akal untuk menghidupkan atau mentransisikannya dengan mulus (coba bayangkan transisi yang mulus dari atau blockke inlinesebaliknya, misalnya!).

Inilah sebabnya mengapa transisi dinonaktifkan jika perubahan tampilan (bahkan jika perubahannya ke atau dari none- nonebukan hanya tidak terlihat, itu adalah mode render elemennya sendiri yang berarti tidak ada render sama sekali!).

Alih-alih panggilan balik, yang tidak ada dalam CSS, kita dapat menggunakan transition-delayproperti.

#selector {
    overflow: hidden; // Hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

Jadi, apa yang terjadi di sini?

1. Ketika visiblekelas ditambahkan, keduanya heightdan opacitymulai animasi tanpa penundaan (0 ms), meskipun heightmembutuhkan 0 ms untuk menyelesaikan animasi (setara dengan display: block) dan opacitymembutuhkan 600 ms.

2. Ketika visiblekelas dihapus, opacitymulai animasi (penundaan 0 ms, durasi 400 ms), dan tinggi menunggu 400 ms dan hanya kemudian secara instan (0 ms) mengembalikan nilai awal (setara dengan display: nonedalam callback animasi).

Catatan, pendekatan ini lebih baik daripada yang menggunakan visibility. Dalam kasus seperti itu, elemen masih menempati ruang pada halaman, dan itu tidak selalu cocok.

Untuk lebih banyak contoh, silakan merujuk ke artikel ini .

display bukan salah satu properti yang berfungsi transisi.

Lihat Properti CSS yang dapat dianimasi untuk daftar properti CSS yang dapat menerapkan transisi padanya. Lihat Nilai CSS dan Unit Modul Level 4, Menggabungkan Nilai: Interpolasi, Penambahan, dan Akumulasi untuk bagaimana mereka diinterpolasi.

Hingga CSS 3 terdaftar di 9.1. Properti dari CSS (cukup tutup sembulan peringatan)

Saya juga sudah mencoba menggunakan ketinggian, tapi itu gagal total.

Terakhir kali saya harus melakukan ini, saya menggunakan itu max-height, yang merupakan properti animatable (meskipun itu sedikit hack, itu berhasil), tetapi berhati-hatilah karena itu mungkin sangat janky untuk halaman yang kompleks atau pengguna dengan ponsel low-end perangkat.

Anda dapat menambahkan animasi khusus 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:nonemenjadi display:blockdan masih berhasil memudar.

Menurut W3C Working Draft 19 November 2013 display bukan properti animatable . Untungnya, visibilityini dapat dianimasikan. Anda dapat rantai transisinya 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 tautan itu akan tetap dapat diklik.

Sunting: tampilan tidak ada yang tidak diterapkan dalam contoh ini.

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

Apa yang terjadi di atas adalah bahwa melalui 99% dari tampilan animasi diatur untuk memblokir sementara opacity memudar. Pada saat terakhir properti tampilan diatur ke tidak ada.

Dan bit yang paling penting adalah mempertahankan frame terakhir setelah animasi berakhir menggunakan mode animasi-isi: ke depan

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

Berikut adalah dua contoh: https://jsfiddle.net/qwnz9tqg/3/

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

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

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

Lalu, 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!

Saya mengalami ini hari ini, dengan position: fixedmodal yang saya gunakan kembali. Saya tidak bisa menyimpannya display: nonedan kemudian menghidupkannya, karena itu baru saja muncul, dan danz-index (nilai negatif, dll) melakukan hal-hal aneh juga.

Saya juga menggunakan height: 0to height: 100%, tetapi hanya berfungsi ketika modal muncul. Ini sama seperti jika Anda menggunakanleft: -100% atau sesuatu.

Kemudian saya tersadar bahwa ada jawaban sederhana. Et voila:

Pertama, modal tersembunyi Anda. Perhatikan heightis 0, dan periksa heightdeklarasi dalam transisi ... ini memiliki 500ms, yang lebih panjang dari opacitytransisi saya . Ingat, ini memengaruhi transisi fade-out yang keluar: mengembalikan modal ke status default.

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

Kedua, modal Anda yang terlihat. Katakanlah Anda sedang mengatur a .modal-activeke body. Sekarang heightini 100%, dan transisi saya juga telah berubah. Saya ingin heightsegera diubah, dan opacityuntuk diambil 300ms.

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

Itu dia, itu bekerja seperti pesona.

Mengambil dari beberapa jawaban ini dan beberapa saran di tempat lain, berikut ini cocok untuk melayang menu (saya menggunakan ini dengan Bootstrap  3, khususnya):

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

Anda juga dapat menggunakannya heightsebagai pengganti max-heightjika Anda menentukan kedua nilai karena height:autotidak diizinkan dengan transitions. Nilai hover dari max-heightkebutuhan harus lebih besar dari heightmenu mungkin.

Saya menemukan cara yang lebih baik untuk masalah ini, Anda dapat menggunakan Animasi CSS dan membuat efek yang luar biasa untuk menampilkan item.

    .item {
     display: none;
}

.item:hover {
     display: block;
     animation: fade_in_show 0.5s
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }
     100% {
          opacity: 1;
          transform: scale(1)
     }
}

Saya telah menemukan masalah ini beberapa kali dan sekarang cukup dengan:

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

Dengan menambahkan kelas block--invisibleseluruh Elemen tidak akan dapat diklik tetapi semua Elemen di belakangnya akan karena pointer-events:noneyang didukung oleh semua browser utama (tidak ada IE <11).

Ubah overflow:hiddenke overflow:visible. Itu bekerja lebih baik. Saya menggunakan seperti ini:

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visiblelebih baik karena overflow:hiddenbertindak persis seperti display:none.

JavaScript tidak diperlukan, dan tidak diperlukan max-height sangat besar. Alih-alih, atur max-heightelemen pada teks Anda, dan gunakan unit relatif font seperti rematauem . Dengan cara ini, Anda dapat mengatur ketinggian maksimum lebih besar dari wadah Anda, sambil menghindari penundaan atau "muncul" ketika menu ditutup:

HTML

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

CSS

nav input + ul li { // Notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // A little bigger to allow for text-wrapping - but not outrageous
}

Lihat contoh di sini: http://codepen.io/mindfullsilence/pen/DtzjE

Setelah jawaban yang diterima dari Guillermo ditulis, spesifikasi transisi CSS 2012-04-03 mengubah perilaku transisi visibilitas dan sekarang dimungkinkan untuk menyelesaikan masalah ini dengan cara yang lebih singkat , tanpa menggunakan penundaan transisi:

.myclass > div {
                   transition:visibility 1s, opacity 1s;
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div
               {   visibility:visible; opacity:1 }

Waktu berjalan yang ditentukan untuk kedua transisi biasanya harus sama (walaupun waktu yang sedikit lebih lama untuk visibilitas bukan masalah).

Untuk versi yang sedang berjalan, lihat posting blog saya Visibilitas Transisi CSS .

Wrt judul pertanyaan "Transisi pada tampilan: properti" dan dalam menanggapi komentar dari Rui Marques dan josh dengan jawaban yang diterima:

Solusi ini berfungsi dalam kasus di mana tidak relevan jika tampilan atau properti visibilitas digunakan (seperti yang mungkin terjadi dalam pertanyaan ini).

Itu tidak akan sepenuhnya menghapus elemen sebagai display:none, hanya membuatnya tidak terlihat, tetapi masih tetap dalam aliran dokumen dan mempengaruhi posisi elemen-elemen berikut.

Transisi yang benar-benar menghapus elemen yang mirip dengan display:nonedapat dilakukan dengan menggunakan tinggi (seperti yang ditunjukkan oleh jawaban dan komentar lain), tinggi-max, atau margin-top / bawah, tetapi juga melihat Bagaimana saya bisa tinggi transisi: 0; untuk ketinggian: otomatis; menggunakan CSS? dan posting blog saya Penanganan Masalah untuk Transisi CSS pada Properti Display dan Height .

Menanggapi komentar dari GeorgeMillo: Diperlukan kedua properti dan transisi: Properti opacity digunakan untuk membuat animasi fade-in dan fade-out dan properti visibilitas untuk menghindari elemen yang masih bereaksi pada peristiwa mouse. Transisi diperlukan pada opacity untuk efek visual dan visibilitas untuk menunda bersembunyi sampai fade-out selesai.

Saya akhirnya menemukan solusi untuk saya, dengan menggabungkan opacitydengan position absolute(tidak menempati ruang ketika disembunyikan).

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

Saya menduga siapa pun yang baru memulai transisi CSS dengan cepat menemukan bahwa mereka tidak berfungsi jika Anda memodifikasi properti tampilan (blok / tidak ada) pada saat yang sama. Salah satu solusi yang belum disebutkan adalah bahwa Anda dapat terus menggunakan display:block/noneuntuk menyembunyikan / menampilkan elemen, tetapi atur opacity menjadi 0 sehingga bahkan ketika itu display:block, itu masih tidak terlihat.

Kemudian untuk memudar, tambahkan kelas CSS lain seperti "on" yang mengatur opacity menjadi 1 dan mendefinisikan transisi untuk opacity. Seperti yang mungkin Anda bayangkan, Anda harus menggunakan JavaScript untuk menambahkan kelas "on" ke elemen, tetapi setidaknya Anda masih menggunakan CSS untuk transisi yang sebenarnya.

PS Jika Anda menemukan diri Anda dalam situasi di mana Anda perlu melakukan keduanya display:block, dan menambahkan kelas "on", pada saat yang sama, tunda yang terakhir menggunakan setTimeout. Kalau tidak, browser hanya melihat kedua hal itu terjadi sekaligus dan menonaktifkan transisi.

Sesederhana berikut ini :)

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

Dapatkan untuk memudar, dan kemudian berhasil height 0;. Pastikan juga untuk menggunakan ke depan agar tetap dalam kondisi akhir.

Solusi ini memiliki kompatibilitas yang sangat baik, dan saya belum melihatnya:

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

Penjelasan : menggunakan visibility: hiddentrik (yang kompatibel dengan "tunjukkan dan hidupkan" dalam satu langkah), tetapi menggunakan kombinasi position: absolute; z-index: -1; pointer-events: none;untuk memastikan bahwa wadah tersembunyi tidak memakan tempat dan tidak menjawab interaksi pengguna .

Anda bisa membuatnya berfungsi seperti yang Anda harapkan - menggunakan tampilan - tetapi Anda harus mencekik peramban agar berfungsi, menggunakan Javascript atau yang lain menyarankan trik mewah dengan satu tag di dalam tag lain. Saya tidak peduli dengan tag batin karena semakin memperumit CSS dan dimensi, jadi inilah solusi Javascript:

https://jsfiddle.net/b9chris/hweyecu4/17/

Mulai dengan kotak seperti:

<div id="box" class="hidden">Lorem</div>

Kotak tersembunyi.

div.hidden {
    display: none;
}
#box {
    transition: opacity 1s;
}

Kita akan menggunakan trik yang ditemukan di q / a terkait, memeriksa offsetHeight untuk mempercepat browser secara instan:

https://stackoverflow.com/a/16575811/176877

Pertama, perpustakaan memformalkan trik di atas:

$.fn.noTrnsn = function () {
    return this.each(function (i, tag) {
        tag.style.transition = 'none';
    });
};
$.fn.resumeTrnsn = function () {
    return this.each(function (i, tag) {
        tag.offsetHeight;    
        tag.style.transition = null;
    });
};

Selanjutnya, kita akan menggunakannya untuk mengungkapkan kotak, dan memudar di:

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden'))
        tag.noTrnsn().removeClass('hidden')
        .css({ opacity: 0 })
        .resumeTrnsn().css({ opacity: 1 });
    else
        tag.css({ opacity: 0 });
});

Ini memudar kotak masuk dan keluar. Jadi, .noTrnsn()matikan transisi, lalu kita hapus hiddenkelas, yang beralih displaydari noneke standarnya block,. Kami kemudian mengatur opacity ke 0 untuk bersiap-siap untuk memudar. Sekarang setelah kami mengatur panggung, kami mengaktifkan kembali transisi, dengan.resumeTrnsn() . Dan akhirnya, mulailah transisi dengan mengatur opacity ke 1.

Tanpa pustaka, baik perubahan pada tampilan maupun perubahan pada opacity akan memberi kita hasil yang tidak diinginkan. Jika kami hanya menghapus panggilan perpustakaan, kami tidak akan mendapatkan transisi sama sekali.

Perhatikan bahwa di atas tidak mengatur tampilan menjadi tidak ada lagi di akhir animasi fadeout. Kita bisa jadi pelamun. Mari kita lakukan dengan yang memudar dan tumbuh tinggi dari 0.

Mewah!

https://jsfiddle.net/b9chris/hweyecu4/22/

#box {
    transition: height 1s, opacity 1s;
}

Kami sekarang mentransisikan tinggi dan opacity. Perhatikan bahwa kita tidak menetapkan tinggi, yang berarti itu adalah default auto,. Secara konvensional ini tidak dapat ditransisikan - pindah dari otomatis ke nilai piksel (seperti 0) tidak akan membuat Anda mengalami transisi. Kita akan mengatasinya dengan perpustakaan, dan satu lagi metode perpustakaan:

$.fn.wait = function (time, fn) {
    if (time)
        this.delay(time);
    if (!fn)
        return this;

    var _this = this;
    return this.queue(function (n) {
        fn.call(_this);
        n();
    });
};

Ini adalah metode kenyamanan yang memungkinkan kita berpartisipasi dalam antrian fx / animasi jQuery yang ada, tanpa memerlukan kerangka animasi apa pun yang sekarang dikecualikan di jQuery 3.x. Saya tidak akan menjelaskan cara kerja jQuery, tetapi cukup untuk mengatakan, .queue()dan .stop()menyederhanakan yang disediakan jQuery membantu kita mencegah animasi kita saling menginjak.

Mari kita menghidupkan efek slide ke bawah.

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden')) {
        // Open it
        // Measure it
        tag.stop().noTrnsn().removeClass('hidden').css({
            opacity: 0, height: 'auto'
        });
        var h = tag.height();
        tag.css({ height: 0 }).resumeTrnsn()
        // Animate it
        .css({ opacity: 1, height: h })
        .wait(1000, function() {
            tag.css({ height: 'auto' });
        });
    } else {
        // Close it
        // Measure it
        var h = tag.noTrnsn().height();
        tag.stop().css({ height: h })
        .resumeTrnsn()
        // Animate it
        .css({ opacity: 0, height: 0 })
        .wait(1000, function() {
            tag.addClass('hidden');
        });
    }
});

Kode ini dimulai dengan memeriksa #boxdan apakah saat ini disembunyikan, dengan memeriksa kelasnya. Tapi itu lebih berhasil menggunakan wait()panggilan perpustakaan, dengan menambahkan hiddenkelas pada akhir animasi slideout / fade, yang Anda harapkan untuk menemukan jika itu sebenarnya tersembunyi - sesuatu yang contoh sederhana di atas tidak bisa lakukan. Ini terjadi juga untuk mengaktifkan tampilan / menyembunyikan elemen berulang-ulang, yang merupakan bug pada contoh sebelumnya, karena kelas tersembunyi tidak pernah dipulihkan.

Anda juga dapat melihat perubahan CSS dan kelas yang dipanggil .noTrnsn()untuk secara umum mengatur panggung untuk animasi, termasuk melakukan pengukuran, seperti mengukur apa yang akan menjadi ketinggian akhir #boxtanpa menunjukkannya kepada pengguna, sebelum memanggil.resumeTrnsn() , dan menganimasinya dari set lengkap itu. panggung ke nilai-nilai CSS tujuannya.

Jawaban Lama

https://jsfiddle.net/b9chris/hweyecu4/1/

Anda dapat memilikinya transisi pada klik dengan:

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

CSS adalah apa yang Anda duga:

.hidden {
    display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
    -webkit-transition: transform 2s;
    transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

Kuncinya adalah membatasi properti tampilan. Dengan menghapus kelas tersembunyi dan kemudian menunggu 50 ms, kemudian memulai transisi melalui kelas yang ditambahkan, kita membuatnya muncul dan kemudian berkembang seperti yang kita inginkan, alih-alih hanya melompat ke layar tanpa animasi. Serupa terjadi sebaliknya, kecuali kami menunggu sampai animasi selesai sebelum menerapkan tersembunyi.

Catatan: Saya menyalahgunakan di .animate(maxWidth)sini untuk menghindari setTimeoutkondisi balapan. setTimeoutcepat untuk memperkenalkan bug tersembunyi ketika Anda atau orang lain mengambil kode yang tidak menyadarinya. .animate()dapat dengan mudah dibunuh .stop(). Saya hanya menggunakannya untuk menempatkan penundaan 50 ms atau 2000 ms pada antrian fx standar di mana mudah ditemukan / diselesaikan oleh pembuat kode lain di atas ini.

Saya memiliki masalah serupa yang tidak dapat saya temukan jawabannya. Beberapa pencarian Google kemudian membawa saya ke sini. Mengingat saya tidak menemukan jawaban sederhana yang saya harapkan, saya menemukan solusi yang elegan dan efektif.

Ternyata visibilityproperti CSS memiliki nilai collapseyang umumnya digunakan untuk item tabel. Namun, jika digunakan pada elemen lain, elemen itu secara efektif menjadikannya tersembunyi , hampir sama dengan display: hiddentetapi dengan kemampuan tambahan bahwa elemen tersebut tidak memakan ruang apa pun dan Anda masih dapat menghidupkan elemen tersebut.

Di bawah ini adalah contoh sederhana dari tindakan ini.

function toggleVisibility() {
  let exampleElement = document.querySelector('span');
  if (exampleElement.classList.contains('visible')) {
    return;
  }
  exampleElement.innerHTML = 'I will not take up space!';
  exampleElement.classList.toggle('hidden');
  exampleElement.classList.toggle('visible');
  setTimeout(() => {
    exampleElement.classList.toggle('visible');
    exampleElement.classList.toggle('hidden');
  }, 3000);
}

#main {
  display: flex;
  flex-direction: column;
  width: 300px;
  text-align: center;
}

.hidden {
  visibility: collapse;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 0.5s linear;
}

<div id="main">
  <button onclick="toggleVisibility()">Click Me!</button>
  <span class="hidden"></span>
  <span>I will get pushed back up...</span>
</div>

Solusi universal paling sederhana untuk masalah ini adalah: silakan tentukan display:nonedi CSS Anda, namun Anda harus mengubahnya ke block(atau apa pun yang lain) menggunakan JavaScript, dan kemudian Anda juga harus menambahkan kelas ke elemen Anda dalam pertanyaan yang sebenarnya melakukan transisi dengan setTimeout () . Itu saja.

Yaitu:

<style>
    #el {
        display: none;
        opacity: 0;
    }
    #el.auto-fade-in {
        opacity: 1;
        transition: all 1s ease-out; /* Future, future, please come sooner! */
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
    }
</style>

<div id=el>Well, well, well</div>

<script>
    var el = document.getElementById('el');
    el.style.display = 'block';
    setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

Ini diuji di browser waras terbaru. Jelas itu seharusnya tidak berfungsi di Internet Explorer 9 atau yang lebih lama.

Saya pikir SalmanPK memiliki jawaban terdekat. Itu memudar item masuk atau keluar, dengan animasi CSS berikut. Namun, properti tampilan tidak hidup dengan lancar, hanya opacity.

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

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

Jika Anda ingin menghidupkan elemen yang bergerak dari blok tampilan ke tampilan tidak ada, saya tidak dapat melihat bahwa saat ini hanya mungkin dengan CSS. Anda harus mendapatkan ketinggian dan menggunakan animasi CSS untuk mengurangi ketinggian. Ini dimungkinkan dengan CSS seperti yang ditunjukkan pada contoh di bawah ini, tetapi akan sulit untuk mengetahui nilai ketinggian yang tepat yang Anda butuhkan untuk menghidupkan elemen.

Contoh jsFiddle

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " push-down";

Anda dapat melakukan ini dengan acara transisi, jadi Anda membangun dua kelas CSS untuk transisi, satu memegang animasi lainnya, memegang keadaan tampilan tidak ada. Dan Anda beralih setelah animasi berakhir? Dalam kasus saya, saya dapat menampilkan divs lagi jika saya menekan tombol, dan menghapus kedua kelas.

Coba cuplikan di bawah ini ...

$(document).ready(function() {
  // Assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    // We check if this is the same animation we want
    if (event.originalEvent.animationName == "col_hide_anim") {
      // After the animation we assign this new class that basically hides the elements.
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      // We switch the animation class in a toggle fashion...
      // and we know in that after the animation end, there
      // is will the animation-helper-display-none extra
      // class, that we nee to remove, when we want to
      // show the elements again, depending on the toggle
      // state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        // I'm toggling and there is already the above class, then
        // what we want it to show the elements , so we remove
        // both classes...
        return "visibility_switch_off animation-helper-display-none";
      }
      else {
        // Here we just want to hide the elements, so we just
        // add the animation class, the other will be added
        // later be the animationend event...
        return "visibility_switch_off";
      }
    });
  });
});

table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding: 5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>

Jika Anda menggunakan jQuery untuk mengatur kelas Anda, ini akan bekerja 100%:

$(document).ready(function() {
  $('button').click(function() {
    var container = $('.container');
    
    if (!container.hasClass('active')) {
      container.addClass('show').outerWidth();
      container.addClass('active');
    }
    else {
      container.removeClass('active').one('transitionend', function() {
        container.removeClass('show');
      });
    }
  });
});

.container {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.container.show {
  display: flex;
}
 
.container.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Toggle</button>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Tentu saja Anda bisa menggunakan jQuery .fadeIn()dan .fadeOut()fungsi, tetapi keuntungan dari pengaturan kelas sebagai gantinya jika Anda ingin beralih ke nilai tampilan selain block(seperti default dengan .fadeIn()dan .fadeOut()).

Di sini saya beralih ke tampilan flexdengan efek pudar yang bagus.

Alih-alih menggunakan displayAnda bisa menyimpan elemen 'di luar layar' sampai Anda membutuhkannya, dan kemudian mengatur posisinya ke tempat yang Anda inginkan dan mengubahnya pada waktu yang bersamaan. Ini memunculkan sejumlah masalah desain lainnya, sehingga jarak tempuh Anda mungkin berbeda.

Anda mungkin tidak ingin menggunakannya display, karena Anda ingin konten dapat diakses oleh pembaca layar, yang sebagian besar mencoba mematuhi aturan untuk visibilitas - yaitu, jika itu tidak boleh dilihat mata, itu tidak akan ditampilkan sebagai konten ke agen.

Anda cukup menggunakan visibilitas CSS : tersembunyi / terlihat alih-alih tampilan : tidak ada / blok

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

Saya memulai proyek kerangka sumber terbuka yang disebut Toggle Display Animate .

Pembantu kerangka ini akan memungkinkan Anda untuk dengan mudah meniru acara jQuery / sembunyikan, tetapi dengan animasi transisi CSS 3 masuk / keluar.

Menggunakan toggle kelas sehingga Anda dapat menggunakan metode CSS apa pun yang Anda inginkan pada elemen selain tampilan: none | block | table | inline, dll. Serta penggunaan alternatif lain yang dapat dipikirkan.

Tujuan desain utamanya adalah untuk status toggle elemen, dan mendukung status pengembalian di mana menyembunyikan objek memungkinkan Anda untuk menjalankan frame kunci secara terbalik atau memainkan animasi alternatif untuk menyembunyikan elemen.

Sebagian besar markup untuk konsep yang saya kerjakan adalah CSS, dan sangat sedikit JavaScript yang benar-benar digunakan.

Ada demo di sini: http://marcnewton.co.uk/projects/toggle-display-animate/