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

我知道我可以用jquery淡入淡出，但在移动设备上，它会变得紧张不安，像低fps之类的。经过大量搜索，我发现我可以使用css3转换转到opacity 0，但问题是元素本身仍然有位置。即使具有可见性：无，它仍将保留其所在的空间。唯一的方法是使用显示：没有，但我知道我不能设置动画。 那么，有没有一种结合jquery和css3在移动设备上实现平滑淡入淡出动画的方法呢？甚至只有一个？多谢各位

---

**EDIT**

：好的，淡入的答案很好，现在淡入会很好。问题是我想我必须在

（'id'）.css（'display'，'block'）

之后和

（'id'）.css（'opactity'，'1'）

之前脉冲一毫秒的延迟。如果它是有效的，就不要担心。但它是这样工作的，但我所有的其他动画都不起作用。我仍然很困惑。

如果您使用jQuery的

fadeIn（）

，它将在元素中淡入

显示：无

$element.fadeIn();

---

函数显示（）{
$（“#el”）.fadeIn（）；
}

#el{
显示：无；
}

显示
您好

您正在测试哪种手机，以获得如此缓慢/紧张的动画效果？对于移动浏览器上支持的所有动画，我的似乎都能很好地工作

在任何情况下，都可以尝试使用css关键帧

令人烦恼的是，您无法设置某些属性的动画（例如

显示

），但它确实允许很多事情，包括如下所示的不透明度

div{
宽度：100px；
高度：100px；
背景：红色；
利润率：20px；
}
.藏起来{
-webkit动画：隐藏5s向前；
动画：向前隐藏2秒；
}
@-webkit关键帧隐藏{
从{
不透明度：1；
}
40% {
不透明度：0；
}
100% {
位置：绝对位置；
不透明度：0；
}
}

看一看

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

---

您应该能够实现结合不透明度和变换属性的淡入淡出过渡

您应该始终尝试使用CSS3过渡，而不是jQuery动画。在这里，我使用CSS3转换淡出

.square

，然后等待转换结束，将

显示设置为
无

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

淡出：

淡入：

HTML

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

jQuery

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

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

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

您不能设置“显示”属性的动画，但可以设置“高度”属性的动画。jQuery动画在移动设备（AFAIK）上不应紧张不安。你可能有一个较慢的移动设备。你可以添加两个类-一个类的
转换时间为1s，例如将不透明度更改为0，另一个类的
转换延迟为1s，将元素移出画布，例如
左：-999px
@JonathanLam我正在iPhone 6 plus上测试。我认为它应该能够处理它。顺便说一句，css3动画工作正常，但jquery fadeIn（）不行。@DarrenSweeney我认为这会工作。它工作正常，但问题是fps真的很低。虽然css动画（如加载）很好，但这仍然保留了元素，占用了空间，因此您会有一个缺口-正如您的示例所示，我正在iphone6 plus上测试。但是jquery淡入淡出动画的速度非常慢。@DarrenSweeney我在回答中确实注意到了这一点，但是如果不使用JSchange
hide 5s
来
hide 1s
，几乎没有其他选择-这个控制淡入淡出speed@ArmanMomeni试试CSS替代方案，看看效果如何。问题真的在于如何消除它阻碍事情发展的能力。我想这就是我需要的。我会试试，然后再打给你。我想这把小提琴更好地展示了你的作品。我会试试，我想我找到了我的答案。很抱歉再次打扰你，你能为另一种方式提供一种方式吗？我的意思是淡入？很有魅力，非常感谢。如果你能随时回答上述问题，我会很高兴。我知道这是一个古老的问题，但我想补充一点，没有必要设置一个小的超时时间。在您的小提琴示例中，您已将50设置为句点。您可以将此设置为0，它将正常工作。。。仍然将队列中的代码推到队列的后面，并允许浏览器在其前面重新绘制“display:block”代码。没有解释如何实现所需的结果。@danieldwhurst--是的，我刚刚发布了一篇文章作为参考文档，以实现平滑（轻量级）的动画。我不擅长CSS，但我想与大家分享我很久以前看到的这篇有趣的文章
var $square = $('.square');

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

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