如何用jquery和css3在手机上实现*SMOOTH*淡入淡出动画

how to achieve *SMOOTH* fade in and out animation on mobile with jquery and css3?

本文关键字：实现 SMOOTH 淡入 动画 淡出 手机 jquery 何用 css3      更新时间：2023-09-26

我知道我可以使用jquery淡入淡出，但在移动设备上会有抖动，喜欢低fps之类的。经过大量搜索，我发现我可以使用css3转换到opacitiy 0，但问题是元素仍然有自己的位置。即使有可见性：没有，它也会保持原来的空间。唯一的方法是使用display：没有，但据我所知，我无法设置动画。那么，有没有一种方法可以通过jquery和css3的组合在手机上实现平滑的淡入淡出动画呢？甚至只有一个？非常感谢。

**EDIT**：好的，淡出的答案很好，现在淡出会很好。问题是我认为我必须在CCD_ 2之后和CCD_。如果它是有效的，就不要这样做。但它是这样工作的，但我所有的其他动画都不起作用。我还是很困惑。

您应该始终尝试使用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');
});

你在测试什么样的手机才能获得如此缓慢/抖动的动画？我的似乎适用于移动浏览器上支持的所有动画。

在任何情况下，您都可以尝试使用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上的关键帧

最终，在手机上，你应该尽量避免使用动画，因为手机浏览器并没有针对这些事情进行优化。你的网站应该在大小、布局、内容和动画方面都有所下降。

如果使用jQuery的fadeIn()，它将在元素中淡入
display: none

$element.fadeIn();


function show() {
  $("#el").fadeIn();
}
#el {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="show()">Show</button>
<div id="el">Hello</div>

看看这篇文章

您应该始终避免设置会触发布局或绘制的属性的动画，这两种属性都很昂贵，并且可能导致跳过帧。

您应该能够实现结合不透明度和变换属性的渐变

相关文章：