如何使用jquery和css3实现*SMOOTH*在移动设备上淡入淡出动画？

Question

我知道我可以用jquery淡入淡出,但在移动设备上它会变得紧张,就像低fps或其他东西一样.经过大量的搜索,我发现我可以使用css3过渡到opacitiy 0,但问题是元素仍然有自己的位置.即使是可见性:没有,它会保留它所在的空间.唯一的方法是使用display:none但是因为我知道我不能动画那个.那么有没有办法通过jquery和css3的组合在移动设备上实现平滑的淡入淡出动画？甚至只有一个？谢谢.

**EDIT**:好的,fadeout的答案工作得很好,现在淡出就会很好.问题是我认为我必须在('#id').css('display','block')之前和之后延迟一毫秒('#id').css('opactity','1').如果它是有效的,那就不要了.但它的工作原理是这样的,但我所有的其他动画都无效.还是真的很困惑.

Answer 1

你应该总是尝试使用CSS3过渡,而不是jQuery动画.在这里我使用CSS3过渡来淡出.square,然后我等到转换结束以设置display为none.

如果你在jQuery中为一个元素设置动画,例如,使用fadeOut,你会看到会发生什么.它基本上将不透明度设置为1,然后以微小的增量将该值降低到0.这是非常低效的.因此,最好始终尽可能使用CSS3过渡和动画.

淡出:https://jsfiddle.net/danhaswings/znLL0ws5/1/

淡入淡出:https://jsfiddle.net/danhaswings/kjgmxa8x/

HTML

<div class="square"></div>

CSS

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s ease-in-out;
}

jQuery的

var $square = $('.square');

$square.css('opacity', '0');

$square.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    $(this).css('display', 'none');
});

Answer 2

您正在测试哪种手机才能获得如此缓慢/紧张的动画？我的似乎适用于移动浏览器支持的所有动画。

无论如何，您始终可以尝试使用 css 关键帧。

令人烦恼的是，您无法对某些属性（例如display）进行动画处理，但它确实允许执行很多操作，包括不透明度，如下所示。

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}
.to_hide {
  -webkit-animation: hide 5s forwards;
  animation: hide 2s forwards;
}
@-webkit-keyframes hide {
  from {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    position: absolute;
    opacity: 0;
  }
}

<div class="to_hide"></div>
<div></div>

• MDN 上的关键帧

最终，在移动设备上，您应该尽量避免使用动画，因为移动浏览器并未针对此类内容进行优化。您的网站应该在大小、布局、内容和动画方面优雅地降级。