jQuery调用CSS3淡入淡出动画？

我在我的网站上使用的动画（为iOS开发）有一个简单的淡入淡出和淡出使用jQ：

$('.loading').fadeOut(); 

然而，iPhone在运行这些动画时却不稳定。 然而，CSS3动画工作得更顺畅。 我如何使用jQuery淡出div但使用CSS3动画而不是jQ？

Answer 1

这样更容易，但一旦淡出它就不会“消失”，因此一旦转换完成，页面就不会重排。 它相当于jQuery的fadeTo() ，而不是fadeOut() ;

淡出

 $('selector').css({ "opacity": 0, "pointer-events": "none" }); 

淡入

 $('selector').css({ "opacity": 1, "pointer-events": "auto" }) 

使用Timeout延迟执行

 setTimeout(function(){ $('selector').css({ "opacity": 1, "pointer-events": "auto" }) },) 

使用.delay延迟执行

  $('selector') .delay(2000) .queue(function() { $(this).css({ "opacity": 1, "pointer-events": "auto" }) }); 

但这可能最好通过你的css中的转换延迟属性完成：

  -vendor-transition-delay: 2s; 

或者简写：

  -vendor-transition: opacity 200ms ease 2s; 

Answer 2

使用CSS动画创建一个类，并在需要时附加它 –

 $(".loading").addClass("fadeout").delay(2000).queue(function() { $(this).css('display', 'none'); });