Saya mendapat popup yang muncul dengan sangat baik dengan metode jQuery ini:

$("#pop").show(450);

Apa pengganti css yang sesuai yang akan melakukan pekerjaan yang sama (dengan waktu 450ms)? Apakah benar-benar ada perbedaan kinerja yang mendukung css? Jika demikian, Mengapa?

Terima kasih.

0
Rocky Racoon 14 Oktober 2017, 00:54

3 jawaban

Anda bisa melakukan ini. Idenya adalah Anda meletakkan popup di belakang dan membuat opacity 0. Kemudian ketika memiliki kelas, "tunjukkan" itu membawanya ke depan dan membuatnya terlihat sepenuhnya.

#pop{
    -webkit-transition: ease opacity 450ms
    -moz-transition: ease opacity 450ms
    transition: ease opacity 450ms
    opacity: 0;
    z-index: -1;
}

#pop.show{
    opacity: 1;
    z-index: 100;
}
1
Chase W. 14 Oktober 2017, 00:58
Terima kasih, tetapi bagaimana cara mengaktifkan #pop.show yang baru? Sesuatu seperti ini? $( "p" ).addClass( "KelassayaKelasAnda");
 – 
Rocky Racoon
14 Oktober 2017, 01:08
Ya, Anda baru saja menambahkan kelas menggunakan metode apa pun yang Anda anggap tepat.
 – 
Kevin B
14 Oktober 2017, 01:10
Untuk beberapa alasan yang sepertinya tidak berhasil untuk saya. css saya adalah: #pop { posisi: absolut; atas: 0; kiri: 0; lebar: 100vw; tinggi: 100vh; warna latar belakang: rgba(0,0,0,0.8); indeks-z: 10; opasitas: 0; } dan ketika saya memiliki "poppy" yang opacity:1 tidak ada yang terjadi. $('#pop').addClass('poppy');
 – 
Rocky Racoon
14 Oktober 2017, 01:27

Metode show/hide bekerja dengan mengubah gaya inline opacity elemen dari 0-1 atau sebaliknya. Dengan demikian Anda dapat membuat beberapa gaya css yang melakukan animasi yang sama.

Pemikiran di balik css menjadi lebih baik dalam hal ini daripada javascript adalah karena javascript akan melakukan ini dengan sering mengubah DOM, menghasilkan banyak perhitungan ulang elemen, bukan hanya elemen yang berpotensi Anda ubah.

Ketika Anda melakukan ini dengan CSS, browser tidak hanya memiliki kesempatan untuk mengoptimalkan dengan menggunakan GPU untuk melakukan hal ini, tetapi GPU dapat menganimasikan hal-hal seperti opacity dengan biaya yang sangat rendah karena mengetahui bahwa hal itu akan memiliki pengaruh terbatas pada lainnya. elemen.

EDIT: Orang lain mungkin mengoreksi saya, tetapi inilah yang saya kumpulkan dari penelitian saya sendiri tentang masalah ini. Satu artikel referensi: https://www.html5rocks.com/en /tutorials/speed/high-performance-animations/

1
Taplar 14 Oktober 2017, 01:00

Menggunakan keyframes, animasi-isi, animasi-tunda, animasi-durasi, cara opati di CSS3

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body {padding: 0; margin: 0; background-color: #333;}

.container {position: fixed; top: 25%; left: 25%;}

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

/*---make a basic box ---*/
#pop{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 10px;
  float: left;
  border: 1px solid #333;
  background: #999;
}
#pop1{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 10px;
  float: left;
  border: 1px solid #333;
  background: #999;
}
#pop2{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 10px;
  float: left;
  border: 1px solid #333;
  background: #999;
}
<div class="container">
  <div id="pop" class="box fade-in one">
    look at me fade in
  </div>

  <div id="pop1" class="box fade-in two">
    Oh hi! i can fade too!
  </div>

  <div id="pop2" class="box fade-in three">
   Oh hi! i can fade three!
  </div>
</div>
1
14 Oktober 2017, 01:15
Tidak perlu untuk ini dalam kasus dasar seperti itu. Lihatlah jawaban dari @Chase W.
 – 
Joshua K
14 Oktober 2017, 01:06