CSS3 анимация не работает Firefox

jquery ajax css3 animation mozilla

510 просмотра

1 ответ

68 Репутация автора

Я использую библиотеку anime.js для создания пульсирующего эффекта, используя 3 деления. Эта анимация работает правильно в Chrome, Opera и Edge. Я пробовал разные вендоры-префиксы в css и использую чистое решение css с ключевыми кадрами, но результат тот же. Я также попробовал аппаратное ускорение анимации, но оно едва влияет на производительность.

Проблема заключается в масштабировании элемента div с тенями box-style и градиентом. Есть ли способ создать такой же пульсирующий / волновой эффект без блокировки в Mozilla?

var circleAnimation = anime({
  targets: '.pulse',
  delay: function(el, index) {
    return index * 500;
  },
  scale: {
    value: 12,
    duration: 5000,
    easing: 'easeOutCubic',
  },
  opacity: {
    value: 0,
    easing: 'easeOutCubic',
    duration: 4500,
  },
  loop: true
});

Дж.С. Фиддл: https://jsfiddle.net/hzx3jkhq/1/

Спасибо

Автор: a_developer Источник Размещён: 18.07.2016 11:21

Ответы (1)


1 плюс

597 Репутация автора

Решение

Я попробовал вашу ручку кода и понял, что может быть другой способ создать этот эффект, используя только CSS. На самом деле, я всегда стараюсь работать с CSS-препроцессором или просто с анимацией ключевых кадров CSS, чтобы не сильно зависеть от библиотек javascript или JS.

Итак, я обнаружил с помощью вашего пера кода, что библиотека настраивала два свойства, чтобы получить эффект, который вы печатали в своем JavaScript, это непрозрачность от 0,3 до 0 и преобразование: (scale ()) из 1 (обычный элемент) размер) до 12. Я узнал об этом, просто осмотрев элемент. Итак, я пошел в CSS и добавил это в ваш код:

.expandAnimation{
    animation: expanding-opacity 4s infinite;
}

/* Expand */

@-moz-keyframes expanding-opacity {
    from { -moz-transform: scale(1);opacity:0.2; }
    to { -moz-transform: scale(12); opacity:0;}
}
@-webkit-keyframes expanding-opacity {
    from { -webkit-transform: scale(1);opacity:0.2; }
    to { -webkit-transform: scale(12); opacity:0;}
}
@keyframes expanding-opacity {
    from {transform:scale(1);opacity:0.2;}
    to {transform:scale(12);opacity:0;}
}

Причина, по которой JavaScript-библиотека anime.js не работает в Firefox, заключается в том, что ей не хватает префиксов mozilla где-то в коде, потому что библиотека движется вперед и изменяет CSS по коду, есть несколько методов, чтобы сделать это чисто с помощью JavaScript, но это должно быть сделано из исходного кода библиотеки, ха-ха.

Также я добавил этот кусок JQuery, чтобы просто манипулировать его классами в определенное время:

$('.pulse').each(function(i,element){            
    setTimeout( function () {               
        $(element).addClass('expandAnimation');           
    }, i * 500);            
});

Что также может помочь остановить анимацию, когда вы хотите, чтобы она остановилась, или легко изменить значения CSS.

Надеюсь, что это поможет вам,

Лео.

Автор: Leo Размещён: 04.08.2016 01:41
Вопросы из категории :
32x32