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）制作动画，但它确实允许包括不透明度在内的很多内容，如下所示。

＆＃13;

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

＆＃13;

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

＆＃13;

Keyframes on MDN

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

Answer 3

如果你使用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>

Answer 4

查看this article

您应始终注意避免动画会触发布局或绘画的属性，这两种材料都很昂贵且可能会导致跳帧。

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

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

4 个答案: