jQuery调用CSS3淡入淡出动画？

Question

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

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

的iPhone，但是，是波涛汹涌的同时运行这些动画。然而，CSS3动画工作更顺畅。我怎样才能淡出div使用jQuery，但使用CSS3动画，而不是jQ的？

Answer 1

这种情况很容易，但一旦淡出它不会“消失”，所以页面不会一旦过渡回流做完了。它相当于jQuery的fadeTo()，而不是​​;

淡出

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

淡入

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

延缓执行与超时

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