CSS替代$ .show（）;

Question

我得到了一个弹出窗口，可以很好地显示这个jQuery方法：

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

什么是合适的css替代品，可以完成相同的工作（450ms时间）？ 是否真的有利于css的性能差异？如果是这样，为什么？

感谢。

Answer 1

你可以这样做。我的想法是你把弹出窗口放在后面并使不透明度为0.然后当它有了类时，＆＃34;显示＆＃34;它将它带到前面并使其完全可见。

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

Answer 2

show / hide方法通过从0-1更改元素的不透明度的内联样式或反之亦然。因此，您可以制作一些执行相同动画的CSS样式。

css在这方面比javascript更好的想法是因为javascript会通过频繁更改DOM来做到这一点，导致很多元素的重新计算，而不仅仅是你正在改变的元素。

当您使用CSS执行此操作时，浏览器不仅有机会使用GPU进行优化，而且GPU可以以非常低的成本制作不透明度等内容，因为它知道这样做会受到限制影响其他元素。

编辑：其他人可能会纠正我，但这是我从自己的研究中收集到的。 一篇参考文章：https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Answer 3

  

使用关键帧，动画填充，动画延迟，动画持续时间，    CSS3

中的opaticy方式

@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>