Импульсная анимация SVG в IE / Edge

Question 1

У меня есть импульсная анимация для кругов svg, но transform: scale для кругов не работает в IE / Edge. Отлично работает в других браузерах. Есть ли способ исправить эту проблему без каких-либо плагинов jquery?

  .cls-1, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 {
    transform: scale(0,0);
    -ms-transform: scale(0,0);
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -o-transform:scale(0,0);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: pulse 2s infinite cubic-bezier(.5,.5,0,1);
  }

@keyframes pulse {
    25% {
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform:scale(1);
    }

}

Codepen: https://codepen.io/burianovata/pen/oNjxqom

html css animation svg

0

rokky 18 Апр 2020 в 13:41

Answer

Решением было изменить радиус окружности с помощью JQuery. Работает одинаково во всех браузерах, никаких дополнительных плагинов не требуется. Я также пробовал GSAP3 - была проблема с transform-origin и Snap.svg - несмотря на то, что он также влияет на атрибут радиуса, он не работал в IE / Edge. Пример находится по ссылке Codepen, указанной выше.

//Change radius to zero
function scale() {
  if($('.map-circle').length) {
    $('.map-circle')
      .animate(
      {'radius': 0},
      {
        step: function (radius) {
          $(this).attr('r', radius);
        },
        duration: 800
      }
    );
  }
}

//Change radius to initial size - 35.5
function pulse() {
  if($('.map-circle').length) {
    $('.map-circle')
      .animate(
      {'radius': 35.5},
      {
        step: function (radius) {
          $(this).attr('r', radius);
        },
        duration: 1200
      }
    );
  }

}

// Infinite animation
function animation() {
  setInterval(
    function () {
      pulse();
      scale();
    }, 1000);
}

animation();

0

rokky 20 Апр 2020 в 21:42

Question 2

Решением было изменить радиус окружности с помощью JQuery. Работает одинаково во всех браузерах, никаких дополнительных плагинов не требуется. Я также пробовал GSAP3 - была проблема с transform-origin и Snap.svg - несмотря на то, что он также влияет на атрибут радиуса, он не работал в IE / Edge. Пример находится по ссылке Codepen, указанной выше.

//Change radius to zero
function scale() {
  if($('.map-circle').length) {
    $('.map-circle')
      .animate(
      {'radius': 0},
      {
        step: function (radius) {
          $(this).attr('r', radius);
        },
        duration: 800
      }
    );
  }
}

//Change radius to initial size - 35.5
function pulse() {
  if($('.map-circle').length) {
    $('.map-circle')
      .animate(
      {'radius': 35.5},
      {
        step: function (radius) {
          $(this).attr('r', radius);
        },
        duration: 1200
      }
    );
  }

}

// Infinite animation
function animation() {
  setInterval(
    function () {
      pulse();
      scale();
    }, 1000);
}

animation();

0

rokky 20 Апр 2020 в 21:42

Импульсная анимация SVG в IE / Edge

1 ответ

Похожие вопросы

Новые вопросы

html