Question

我正在尝试使用animate.css将文本动画添加到Javascript中非常简单的报价应用程序中。

我实现的是一个简单的循环，从1到5，在每种情况下调用不同的动画，然后返回1。

console.error(numanim);

每次检测到屏幕上的新点击（=用户要求新的报价）时，都会调用此代码。生命是一个全局变量。

它在我的计算机浏览器上像一个超级按钮一样工作，但是当我在Android模拟器或设备上对其进行测试时，我会出现不一致的地方：我得到的不是预期的系列：首先摇摆两次，然后两次bounceInLeft，然后只是flipInX而已。（这种奇怪的顺序总是相同的，并且在仿真器和物理设备中也相同）。

当我在切换语句之前添加此控制点时：

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)

    console.error('Animation about to start:'+animationName)

    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

它显示每次单击刷新的正确值（1、2、3、4、5、1、2、3等）。我还检查了每种情况下的代码：是否正确到达。

此外：“ animateCSS”是animate.css documentation中提供的功能-不是我编写的；我在第三行添加了一个检查点，以查看将要生成的动画的名称：

MWETokenizer

检查点每次都会显示正确的动画值；但是，奇怪的是，实际生成的动画（仅在检查点之后的下一行触发）与分配的名称不匹配...

我已经研究了与css动画有关的所有其他SO条目，并尝试了所有似乎适用于我的（有限的）知识的事情，例如在清单中启用硬件加速和通过函数刷新css表，而没有任何改变。有谁知道为什么会这样吗？谢谢...

animate.css在Android Webview中的奇怪行为

0 个答案: