Question

我正在使用anime.js库创建一个使用3个div的脉冲效果。此动画在chrome，opera和edge中正常工作。我在css中尝试了不同的供应商前缀，并使用了具有关键帧的纯css解决方案，但结果是相同的。我也尝试过加速动画的硬件，但它几乎不影响性能。

问题在于缩放具有框阴影和渐变样式的div。无论如何，如果没有它锁定在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
});

JS小提琴： https://jsfiddle.net/hzx3jkhq/1/

由于

Answer 1

我尝试了你的代码笔，并意识到可以使用CSS创建此效果的另一种方法。实际上我总是尝试做的一件事就是使用CSS预处理器，或者只是尝试使用CSS关键帧动画，这样我就不会依赖javascript或JS库。

所以，我发现你的代码笔，库调整了两个属性来获得你在JavaScript中输入的效果，那些是从0.3到0的不透明度，以及从1开始的变换:( scale（））（正常元素大小）到12.我发现只是通过检查元素。所以我去了CSS并将其添加到您的代码中：

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

anime.js JavaScript库没有在firefox中运行的原因是因为它的代码周围缺少mozilla前缀，因为库继续进行并且通过代码更改了css，有几种技术可以实现纯粹用JavaScript完成，但是，这必须从库的源代码完成哈哈。

此外，我添加了这段JQuery，以便在某个时间操纵它的类：

    @Test
    public void testErrorVsTestFailure() {

        final String sampleString = null;

        assertEquals('j', sampleString.charAt(0) );
        //above line throws test error as you are trying to access charAt() method on null reference

        assertEquals(sampleString, "jacob");
        //above line throws Test failure as the actual value-a null , is not equal to expected value-string "jacob"
        }

这也有助于在您希望停止动画时停止动画，或者轻松更改CSS值。

希望这能帮到你，

利奥。

CSS3动画不适用于Firefox

1 个答案: