Transisi pada properti tampilan CSS


1449

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.


Apakah transisi CSS berfungsi jika Anda menerapkannya pada properti opacity, bukan tampilan?
Paul D. Waite

13
posisi: absolut; visibilitas: tersembunyi; sama dengan tampilan: tidak ada;
Jawad

8
@Jawad: Hanya jika Anda menambahkan sesuatu z-index:0juga.
DanMan

7
@Jawad: Disarankan untuk tidak pernah menggunakan visibility: hiddenkecuali Anda ingin pembaca layar membacanya (sedangkan browser khas tidak akan). Itu hanya mendefinisikan visibilitas elemen (seperti pepatah opacity: 0), dan itu masih bisa dipilih, diklik, dan apa pun itu; itu tidak terlihat.
Forest Katsch

1
tidak ada dukungan untuk pointer-eventsdi IE 8,9,10, jadi itu tidak selalu baik
Steven Pribilinskiy

Jawaban:


1351

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 .


10
Jawaban ini sepertinya kurang bekerja daripada yang lain dan mencapai apa yang kita harapkan dari tampilan: tidak ada / blok; Terima kasih. Menghemat saya banyak waktu.
Brendan

21
Ya masalah dengan ini adalah apa pun di baliknya akan tumpang tindih meskipun itu tidak terlihat. Saya menemukan menggunakan ketinggian: 0 solusi yang jauh lebih baik
Josh Bedo

741
Ini bagus tetapi masalahnya adalah bahwa elemen "visibilitas tersembunyi" masih menempati ruang sementara "tidak ada tampilan" tidak.
Rui Marques

41
Saya mungkin melewatkan sesuatu, tetapi mengapa Anda mengubah visibilitas dan opacity? Tidak akan mengatur opacity ke 0 menyembunyikan elemen - mengapa Anda perlu mengatur visibilitas ke tersembunyi juga?
GMA

21
@ GeorgeMillo jika Anda hanya mengatur opacity, elemen sebenarnya masih pada rendering halaman (Anda tidak dapat mengklik pemikiran misalnya).
adriendenat

801

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;
}

29
Terima kasih Jim atas jawaban yang lengkap. Anda benar tentang fakta bahwa jika tampilan: perubahan properti sama sekali, maka SEMUA transisi Anda tidak akan berfungsi. Yang memalukan - Saya ingin tahu apa alasan di balik itu. Sebagai catatan, pada tautan yang sama dengan yang saya posting di pertanyaan awal, Anda dapat melihat di mana saya berada dengannya. Satu-satunya masalah (kecil) yang saya miliki adalah di Chrome [5.0.375.125] ketika halaman dimuat, Anda dapat melihat menu dengan cepat memudar saat elemen-elemen dimuat pada halaman. Firefox 4.0b2 dan Safari 5.0 benar-benar baik ... bug atau sesuatu yang saya lewatkan?
RichardTape

7
Saya setuju bahwa ini benar dan akan berkontribusi; sebuah kepala untuk pelancong masa depan. Saya menemukan solusi yang berfungsi di Chrome, tetapi ternyata gagal di iPhone 4: visibility:hidden; opacity:0; -webkit-transition: all .2s ease-in-out;Tidak hanya ini tidak bertransisi dengan benar, tetapi elemen target tidak akan pernah muncul. QA akan mengecewakanmu, aku, dan ibumu.
SimplGy

1
Anda benar-benar dapat mentransisikan properti visibilitas juga .. hanya mengatakan
Cu7l4ss

2
Jika Anda mengatur status tersembunyi Anda ke height: 0;dan tidak mentransisikannya, transisi tidak akan berfungsi. Saya mencoba ini hanya mencoba transisi opacity. Saya harus menghapusheight: 0;
chovy

10
Anda baru saja memenangkan suara karena overflow: hiddenterima kasih banyak!
thiagoh

279

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>


3
Terima kasih untuk ini. The height: 0trick (untuk transisi) yang disebutkan di atas tampaknya tidak bekerja karena ketinggian akan diatur ke 0 pada transisi fade-out, tapi trik ini tampaknya bekerja dengan baik.
Elliot Winkler

41
Terima kasih, sangat berguna. Tapi bagaimana memudarnya?
Illiou

1
Paragraf pertama dari jawaban ini tidak masuk akal. Peramban tidak hanya menonaktifkan semua transisi saat Anda menggunakan displayproperti - tidak ada alasan untuk melakukannya. Dan bahkan jika mereka melakukannya , mengapa animasi akan berhasil? Anda tidak dapat menggunakan displayproperti di animasi CSS.
BoltClock

7
Jawaban terbaik, tidak mungkin dengan transisi tetapi ya dengan animasi.
Mikel

6
Bagaimana dengan animasi terbalik, saat itulah elemen harus perlahan menghilang?
Hijau

77

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!).


8
Sebagus solusi di atas, sangat memuaskan mendapatkan penjelasan yang masuk akal mengapa transisi tidak berlaku untuk menampilkan atribut.
kqr

8
Saya tidak setuju. Ini bisa masuk akal. Jika tampilan: tidak ada yang ditampilkan: blokir terjadi secara instan pada awal transisi, itu akan bagus. Dan untuk transisi kembali, jika beralih dari tampilan: blok ke tampilan: tidak ada yang tepat di akhir transisi, itu akan menjadi sempurna.
Curtis Yallop

2
Jika Anda tidak bisa membayangkan seperti apa animasi dari satu titik ke persegi panjang, Anda punya masalah. Transisi dari tidak menempati ruang menjadi menempati ruang persegi panjang adalah SANGAT jelas, seperti, Anda melakukannya setiap kali Anda menyeret persegi panjang dengan mouse di seperti setiap aplikasi yang pernah ada. Sebagai akibat dari kegagalan ini, ada begitu banyak peretasan yang melibatkan max-height dan margin negatif yang tidak masuk akal. Satu-satunya hal yang berhasil adalah caching ketinggian 'nyata' dan kemudian menjiwai dari nol ke nilai cache dengan JavaScript. Sedih.
Triynko

2
Tryniko: display: tidak ada yang mengubah ukuran elemen menjadi persegi panjang 0 x 0 - ia menghilangkannya dari DOM. Anda bisa menghidupkan dari persegi panjang ke titik dengan menjiwai properti lebar dan tinggi ke nol dan kemudian elemen lain akan mengalir di sekitarnya seolah-olah memiliki 'display: none' tetapi atribut 'display' akan tetap 'block'; elemen masih dalam DOM. Konsep menjiwai antara tampilan: blok dan tampilan: tidak ada yang konyol: Tidak ada kondisi perantara. Suatu elemen ada di DOM atau tidak, tidak peduli seberapa kecil atau tidak terlihat itu.
Steve Thorpe

1
Tidaklah konyol untuk menghidupkan properti diskrit. Properti diskrit seperti displaytidak dapat ditransisikan dengan lancar seperti properti lainnya, tetapi itu tidak berarti waktunya tidak penting. Mampu mengontrol ketika transisi dari disply:blockke display:noneterjadi adalah sangat penting. Sama seperti @CurtisYallop menggambarkannya. Jika saya ingin beralih dari opacity:1ke opacity:0dan kemudian beralih display:blockke display:nonesaya harus bisa melakukannya.
Jens

57

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 .


8
terkejut ini tidak memiliki lebih banyak upvotes - solusi pintar ini entah bagaimana berfungsi dengan sempurna.
keriuhan

3
Ini hanya berfungsi dengan height:100%yang dapat merusak tata letak dalam beberapa kasus. Solusi bagus, jika itu tidak masalah. Salah satu dari beberapa bidirectional yang berfungsi.
Fabian von Ellerts

Ini bagus! Saya dapat menyederhanakannya lebih jauh dalam kasus saya karena saya ingin waktu animasi fade-out sama dengan waktu fade-in. Daripada menggunakan transition: height 0ms 0ms, opacity 600ms 0ms, saya hanya menggunakan transition-delay: 0s.
Jacob Lockard

52

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.


Tautan tidak lagi menunjuk langsung ke bagian properti animatable.
Andrew Lam

1
@AndrewLam Diperbaiki. Terima kasih.
robocat

34

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.


Harus myfirstmenjadi showNavdi sini? Dan bagaimana dengan Firefox? Sayangnya saya tidak dapat menemukan sesuatu yang berhubungan dengan halaman demo yang Anda sebutkan.
Sebastian vom Meer

Terima kasih @SebastianG. Saya telah melakukan koreksi dan menambahkan beberapa info di atas.
Manish Pradhan

@Sebastian vom Meer: versi Firefox yang lebih lama membutuhkan awalan vendor "-moz-", lihat kode yang diedit
Herr_Schwabullek

23
Kecuali saya kehilangan sesuatu, tautan "demo" tidak lagi menunjukkan transisi sub-menu.
Realistis

1
Transisi yang benar untuk sesuatu yang tidak menempati ruang (seperti halnya dengan tampilan: tidak ada) ke sesuatu yang menempati ruang (tampilan: blok), adalah perluasan dimensi, bukan fade-in. Jika itu masalah visibilitas tersembunyi (yang menempati ruang tetapi tidak terlihat) untuk terlihat, maka ukurannya tetap sama dan fade-in sesuai. Tak satu pun dari jawaban ini memecahkan masalah.
Triynko

21

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.


1
saya tidak melihat transisi sama sekali dalam contoh jsfiddle
Gino

@Gino Saya memperbaikinya dengan mengubah 0ke 0s. Rupanya, di masa lalu browser yang saya gunakan untuk pengujian didukung tanpa unit nol kali. Namun, waktu tanpa unit bukan bagian dari Rekomendasi Kandidat W3C, 29 September 2016 .
feklee

Ini harus lebih ditingkatkan. Saya menemukan itu menjadi salah satu solusi terbaik.
Arthur Tarasov

Penggunaan penundaan hanyalah logika terbaik untuk memahami bagaimana ini bekerja. Hidupkan, dan sembunyikan. Perlihatkan, dan hidupkan. Solusi sempurna untuk saya
Bruno Pitteli Gonçalves

15

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/


dengan solusi display: noneini tidak berhasil?
Bart Calixto

Seharusnya 'animasi-isi-mode: ke depan' tidak 'maju'
Alex

Suntingan harus terdiri dari enam karakter dan saya hanya dapat menyarankan sunting karenanya komentar
Alex

1
@ Alex Ok. Tetap salah ketik. Yang menarik adalah bahwa jawaban saya bahkan tidak berfungsi seperti yang diharapkan, tetapi logis untuk berpikir bahwa itu akan jadi saya akan menyimpannya sampai browser akan mendukungnya.
Pawel

3
Seperti yang dapat Anda lihat dalam set kursor ini display: none,, tidak pernah benar-benar diterapkan. jsfiddle.net/3e6sduqh
robstarbuck

14

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!


Ini berfungsi karena penundaan waktu dan bukan karena perintah javascript berada dalam fungsi yang terpisah. Penundaan waktu tampaknya menjadi solusi yang baik dalam banyak kasus :)

10

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.


Memvoting untuk gaya Anda menyelaraskan properti yang sebelumnya milik vendor 👍
George Green

9

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.


3
Ini trik yang bagus tapi ada kekurangan. Waktu transisi tergantung pada ketinggian. Jika ada beberapa menu dengan tinggi variabel, elemen-elemen dengan tinggi lebih dekat ke max-tinggi akan hidup dengan baik. Namun yang lebih pendek akan hidup terlalu cepat, memberikan pengalaman yang tidak konsisten.
pengguna

8

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)
     }
}

Terima kasih atas tip yang bermanfaat ini. Itu bekerja dengan sempurna.
Sedat Kumcu

6

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).


Bisakah Anda mencontohkan ini?
GarethAS

1
Ini berfungsi dengan baik, tetapi harus dicatat bahwa pointer-events tidak bekerja dengan IE di bawah 11
user1702965

menambahkan catatan untuk IE di bawah 11
DominikAngerer

Jika Anda perlu mengatakan elemen di atas segalanya (misalnya menu) ini adalah cara paling jujur ​​untuk melakukan ini sekarang karena pada tahun 2019 dukungan solid untukpointer-events
Josh Davenport

5

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.


Ini tiket saya. Terima kasih!
Dan Loewenherz

5

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


Mirip dengan ini, Anda dapat mengatur ketinggian garis pada teks Anda dan mengubahnya menjadi nol. Jika hanya ada teks di dalamnya, ini akan menyembunyikan wadah.
vicmortelmans

Mengapa begitu sedikit suara? Ini adalah jawaban yang sangat bagus dan mungkin yang saya gunakan.
mwilcox

@ mwilcox Karena menggunakan ketinggian tetap, yang buruk ketika bekerja dengan konten dinamis (bahkan diperkirakan tinggi). Dan itu hanya berguna pada konten teks.
Fabian von Ellerts

5

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.


4

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;
}

4

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.


Luar biasa terima kasih! Saya menulis jawaban lain dengan contoh yang benar-benar berfungsi display:none.
mojuba

4

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.


Ini akan langsung direset ketika menghapus kelas sehingga itu bukan ide yang baik
Sean T

2

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 .


1
Tetapi perubahan positionmasih akan membuat elemen brengsek di sekitar, bukan?
Arsylum

Tentu saja: position: absoluteberarti elemen tersebut tidak memakan tempat, seperti yang dijelaskan dalam penjelasan. Ketika beralih ke position: staticdan muncul, itu akan mengambil ruang seperti elemen normal, yang merupakan inti dari pertanyaan ini. Saya sarankan Anda mencobanya!
Christophe Marois

2
Aku melakukannya. Tetapi jika saya mengerti benar pertanyaannya adalah tentang transisi . Seperti dalam "animasi halus".
Arsylum

2

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.


1

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>


1

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.


1

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";

1

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>


0

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.


0

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.


0

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;
}

5
Ini menghemat ruang, meninggalkan lubang kosong. Jika Anda ingin menutup ruang, Anda harus menghidupkan ketinggian atau properti lainnya.
Marcy Sutton

0

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/

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.