JQuery для вызова CSS3 затухания анимации?

Question

Анимации, которые я использую на своем сайте (который разработан для iOS), имеют простой переход и затухание с помощью jQ:

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

Однако при запуске этих анимаций iPhone нестабилен. CSS3-анимация работает намного плавнее, однако. Как я могу потушить div, используя jQuery, но используя анимации CSS3 вместо jQ?

Answer 1

создать класс с CSS-анимацией и присоединить его при необходимости -

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

Answer 2

Это проще, но после исчезновения оно не «исчезает», поэтому страница не переворачивается после завершения перехода. Это эквивалентно jQuery fadeTo(), а не fadeOut();

Исчезает

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

Fade in

$('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;