Animasi css keluar dari layar

Akan sangat bagus jika Anda bisa melakukannya, tetapi saat ini tidak memungkinkan dan saya rasa tidak akan pernah (e. g. bagaimana Anda menghidupkan ke "display. meja"?). Tapi ada cara untuk mengatasinya, dan saya akan menyajikan satu cara di sini

Mengapa Perlu Menghidupkan "tampilan"?

Kebutuhan untuk menganimasikan properti display berasal dari keinginan untuk memecahkan masalah berikut

• Anda ingin membuat suatu elemen secara bertahap menghilang secara visual dari halaman
• Anda tidak ingin elemen itu mengambil ruang setelah menghilang (mis. e. , Anda ingin hilangnya menyebabkan reflow)
• Anda ingin menggunakan CSS untuk animasi, bukan perpustakaan

Untuk alasan ini, menganimasikan opacity_ ke nol tidaklah cukup karena elemen dengan opasitas nol masih menempati ruang yang sama di halaman

Mari kita lihat bagaimana Anda dapat mencoba memecahkan masalah ini, selangkah demi selangkah

Gunakan Opacity dan Tampilan

Hal pertama yang mungkin ingin Anda lakukan adalah menggunakan properti opacity dan properti display. HTML mungkin terlihat seperti ini

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

<button>TOGGLE VISIBILITY</button>

Dan CSS mungkin terlihat seperti ini

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

Perhatikan saya memiliki

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

let box = document.getElementById('box'),
    btn = document.querySelector('button');

btn.addEventListener('click', function () {
  box.classList.toggle('hidden');
}, false);

Tetapi jika Anda melakukannya, Anda tidak akan melihat transisi (didefinisikan dalam blok deklarasi

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

Lihat Pena
Mencoba Mimic Animating untuk ditampilkan. tidak ada oleh Louis Lazaris (@impressivewebs)
di CodePen

Klik tombol 'beralih visibilitas' berulang kali dan Anda akan melihat kotak menghilang dan muncul tiba-tiba, tanpa transisi

Untuk memperbaikinya, Anda dapat mencoba memisahkan properti display dari opacity di CSS Anda

.hidden {
  display: none;
}

.visuallyhidden {
  opacity: 0;
}

Kemudian Anda dapat mengaktifkan kedua kelas

var box = $('#box');

$('button').on('click', function () {
  box.toggleClass('visuallyhidden');
  box.toggleClass('hidden');
});

Tapi ini tidak akan berhasil, seperti yang ditunjukkan pada demo di bawah ini

Lihat Pena
Mencoba Menghidupkan untuk ditampilkan. tidak ada (Bagian 2) oleh Louis Lazaris (@impressivewebs)
di CodePen

Apa yang kita inginkan adalah elemen menghilang secara visual, kemudian dihapus dari halaman setelah selesai menghilang secara visual, dengan cara yang mirip dengan fungsi callback

(Sebagai poin tambahan di sini, bahkan jika Anda menggabungkan

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

Mengapa Ini Tidak Berhasil?

Sebelum membahas solusi saya, saya hanya akan menjelaskan mengapa Anda tidak dapat melakukan ini hanya dengan mengubah kelas satu per satu. Pertama, jika Anda menambahkan kelas seperti pada contoh di atas, meskipun transisi berhasil, Anda harus menyiapkan bagian terpisah untuk menghapus kelas dan membalikkan cara melakukannya (i. e. jika kotak mulai tersembunyi, Anda harus menyetelnya terlebih dahulu ke

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

Tapi itu tidak penting, karena bagaimanapun juga itu tidak berhasil. JavaScript mengeksekusi baris demi baris, tetapi tidak menunggu semua hal yang terkait dengan satu baris selesai sebelum mengeksekusi baris berikutnya. (Dengan kata lain, jika Anda menjalankan animasi atau peristiwa asinkron lainnya di baris 1, baris 2 akan dilanjutkan meskipun animasi belum selesai)

Apa yang terjadi adalah bahwa 'opasitas' berusaha untuk segera dianimasikan, dan bahkan jika sepersekian milidetik mulai dianimasikan, Anda tidak akan melihatnya karena bagian

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

Kita dapat meringkas masalah yang ingin kita selesaikan sebagai berikut

• Saat elemen terlihat, pertama-tama animasikan opacity, lalu, setelah selesai, buat

  .box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all 2s linear;
    display: block;
  }
  
  .hidden {
    display: none;
    opacity: 0;
  }
  

  0
• Saat elemen tidak terlihat, buat dulu

  .box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all 2s linear;
    display: block;
  }
  
  .hidden {
    display: none;
    opacity: 0;
  }
  

  _7, lalu (saat masih tersembunyi secara visual, tetapi sudah ada di halaman), animasikan opacity

Solusi yang Mungkin

Mungkin ada cara lain untuk melakukan ini, dan saya senang mendengar bagaimana Anda memecahkan masalah ini. Tapi inilah solusi saya

CSS-nya sama (dengan dua kelas 'tersembunyi' masih terpisah), tetapi JavaScript akan terlihat seperti ini

let box = document.getElementById('box'),
    btn = document.querySelector('button');

btn.addEventListener('click', function () {
  
  if (box.classList.contains('hidden')) {
    box.classList.remove('hidden');
    setTimeout(function () {
      box.classList.remove('visuallyhidden');
    }, 20);
  } else {
    box.classList.add('visuallyhidden');    
    box.addEventListener('transitionend', function(e) {
      box.classList.add('hidden');
    }, {
      capture: false,
      once: true,
      passive: false
    });
  }
  
}, false);

Dan inilah aksinya

Lihat Pena
Animasi dari tampilan. tidak ada untuk ditampilkan. blokir oleh Louis Lazaris (@impressivewebs)
di CodePen

Berikut ringkasan tentang apa yang dilakukan kode saat kotak terlihat

• Tambahkan kelas

  let box = document.getElementById('box'),
      btn = document.querySelector('button');
  
  btn.addEventListener('click', function () {
    box.classList.toggle('hidden');
  }, false);
  

  _1, yang akan menganimasikannya hingga menghilang
• Pada saat yang sama kelas ditambahkan, satu event handler ditambahkan menggunakan objek

  let box = document.getElementById('box'),
      btn = document.querySelector('button');
  
  btn.addEventListener('click', function () {
    box.classList.toggle('hidden');
  }, false);
  

  2 dalam metode

  let box = document.getElementById('box'),
      btn = document.querySelector('button');
  
  btn.addEventListener('click', function () {
    box.classList.toggle('hidden');
  }, false);
  

  3 (fitur baru dengan dukungan browser yang layak), yang memberitahu browser untuk menunggu event

  let box = document.getElementById('box'),
      btn = document.querySelector('button');
  
  btn.addEventListener('click', function () {
    box.classList.toggle('hidden');
  }, false);
  

  4 terjadi sekali, lalu berhenti
• Acara

  let box = document.getElementById('box'),
      btn = document.querySelector('button');
  
  btn.addEventListener('click', function () {
    box.classList.toggle('hidden');
  }, false);
  

  4 menyala saat opacity selesai dianimasikan, dan saat ini terjadi, elemen disetel ke

  .box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all 2s linear;
    display: block;
  }
  
  .hidden {
    display: none;
    opacity: 0;
  }
  

  7

Karena Anda tidak dapat mendeteksi peristiwa

let box = document.getElementById('box'),
    btn = document.querySelector('button');

btn.addEventListener('click', function () {
  box.classList.toggle('hidden');
}, false);

• Pertama hapus kelas

  let box = document.getElementById('box'),
      btn = document.querySelector('button');
  
  btn.addEventListener('click', function () {
    box.classList.toggle('hidden');
  }, false);
  

  9, jadikan

  .box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all 2s linear;
    display: block;
  }
  
  .hidden {
    display: none;
    opacity: 0;
  }
  

  7 saat masih tersembunyi secara visual
• Saat ini terjadi, skrip telah mengeksekusi penundaan menggunakan

  .hidden {
    display: none;
  }
  
  .visuallyhidden {
    opacity: 0;
  }
  

  1, setelah itu opacity mulai dianimasikan

Keterlambatannya sangat kecil (20 milidetik), tetapi karena

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
  opacity: 0;
}

Dan jika Anda ingin memulai dengan kotak yang tersembunyi dan membuatnya muncul, Anda hanya perlu memastikan bahwa kelas

let box = document.getElementById('box'),
    btn = document.querySelector('button');

btn.addEventListener('click', function () {
  box.classList.toggle('hidden');
}, false);

let box = document.getElementById('box'),
    btn = document.querySelector('button');

btn.addEventListener('click', function () {
  box.classList.toggle('hidden');
}, false);

Lihat Pena
Animasi dari tampilan. tidak ada untuk ditampilkan. blokir oleh Louis Lazaris (@impressivewebs)
di CodePen

Jika Anda tidak menyertakan kedua kelas tersebut, tampilan awal tidak akan dianimasikan

Bagaimana Anda Akan Melakukannya?

Seperti yang disebutkan, mungkin ada cara lain untuk melakukan ini, atau mungkin ada beberapa peningkatan yang dapat dilakukan pada kode saya

Secara pribadi, saya merasa penggunaan

.hidden {
  display: none;
}

.visuallyhidden {
  opacity: 0;
}

Ada beberapa kemungkinan solusi untuk ini di StackOverflow, tetapi saya menemukan sebagian besar, jika tidak semua, solusi yang diusulkan tidak benar-benar menyelesaikan masalah yang ada.

Bagaimana Anda memindahkan elemen dari layar di CSS?

Bisakah Anda menjeda animasi di CSS?

Bagaimana cara memicu animasi pada scroll CSS?