jQuery调用CSS3淡入淡出动画？ [英] jQuery to call CSS3 fade animation?

问题描述

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

The animations that I am using on my site (which is developed for iOS) has a simple fade in and fade out using jQ:

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

但是，运行这些动画时，iPhone是不稳定的。 CSS3动画工作更顺利。如何使用jQuery淡出 div ，但使用CSS3动画而不是jQ？

The iPhone, however, is choppy while running these animations. CSS3 animations work much smoother however. How can I fade out the div using jQuery but using CSS3 animations instead of the jQ ones?

推荐答案

这更容易，但一旦淡出，它就不会消失，因此页面不会在转换完成后重新流失。它等价于jQuery的 fadeTo（），而不是 fadeOut（）;

This is easier, but once faded out it doesn't "disappear", so the page doesn't reflow once the transition is complete. It's equivalent to jQuery's fadeTo(), not fadeOut();

淡出

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

淡入

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

使用Timeout延迟执行

Delaying execution with Timeout

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

延迟执行.delay

Delaying execution with .delay

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

但这可能最好通过css中的transition delay属性：

But this is probably best done through the transition delay property in your css:

  -vendor-transition-delay: 2s;

或简写：

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

这篇关于jQuery调用CSS3淡入淡出动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！