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

Question

我知道我可以使用 jquery 淡入淡出，但在移动设备上它会很紧张，比如低 fps 之类的。经过大量搜索后，我发现我可以使用 css3 转换转到 opacitiy 0，但问题是该元素仍将占有一席之地。即使可见性:无，它也会保留它所在的空间。唯一的方法是使用 display:none 但据我所知我无法为其设置动画。 那么有没有办法结合jquery和css3在移动端实现流畅的淡入淡出动画呢？甚至只有一个？谢谢。

**EDIT**:好吧，淡出的答案工作得很好，现在淡入会很好。问题是我认为我必须在 ('#id').css('display','block') 之后和 ('#id').css 之前延迟一毫秒('不透明度'，'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');
});