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

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

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

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

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

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

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

HTML

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