Question

让我解释一下这个问题。我正在创建一个phonegap应用程序，我正在运行一些css动画。有问题的动画是一只手移动到屏幕上，当它在屏幕上达到300px时向后动画。

CSS：

   .handmovedown{

      transform: translateY(300px);
        -webkit-transform: translateY(300px); /** Safari & Chrome **/
        -o-transform: translateY(300px); /** Opera **/
        -moz-transform: translateY(300px); /** Firefox **/
    }

    .handmoveup{

      transform: translateY(-300px);
        -webkit-transform: translateY(-300px); /** Safari & Chrome **/
        -o-transform: translateY(-300px); /** Opera **/
        -moz-transform: translateY(-300px); /** Firefox **/
    }

.objecttransition{

    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear; /** Chrome & Safari **/
    -moz-transition: all 0.5s linear; /** Firefox **/
    -o-transition: all 0.5s linear; /** Opera **/
}

我们可以看到手动移动使手向下移动并且手动移动使手向上移动。现在，objecttransition确保每个运行的动画需要0.5秒。这是我的JS：

$(document).ready(
    function()
    {
        $("#Hand").addClass("handmovedown");
        $("#Logo").addClass("logomove");
        setInterval(function(){$("#Hand").addClass("handmoveup");},700);
});

现在上面的代码添加了handmovedown然后700毫秒后，手动移动被添加到手向后移动。浏览器中的所有内容都能正常工作。当我把它放在phonegap并在Android上运行它。手动移动需要超过0.5秒才能运行，然后手动操作开始，动画看起来很奇怪。我的问题是如何测量手动移动所需的时间，以便手动移动可以在触发之前等待适当的时间？

Answer 1

您可以侦听转换完成时触发的事件，然后安排下一次转换。 This answer涵盖了跨越浏览器实现这一切的所有环节。

这是简化的版本，只适用于webkit，只是为了给你一个想法：

$(document).ready(
    function()
    {
        $("#Hand").addClass("handmovedown").on("webkitTransitionEnd", function() {
            // This will get fired at the end of each transition.
            // (Your code wasn't doing it, but I assume we have to remove the
            // handmovedown class here as well as adding handmoveupm, so toggle
            // works)
            setTimeout(function() {
                $(this).toggleClass("handmovedown handmoveup");
            }, 200); // 200ms later
        });
        $("#Logo").addClass("logomove");
    }
);

如何使用JavaScript
衡量动画发生的时间

如果你真的想知道花了多长时间（我没理解你真的那么做），那么：

$(document).ready(
    function()
    {
        var started = new Date();
        $("#Hand").addClass("handmovedown").on("webkitTransitionEnd", function() {
            // This will get fired at the end of each transition.
            console.log("Completed after " + (new Date() - started) + "ms");

            // (Your code wasn't doing it, but I assume we have to remove the
            // handmovedown class here as well as adding handmoveupm, so toggle
            // works)
            setTimeout(function() {
                started = new Date();
                $(this).toggleClass("handmovedown handmoveup");
            }, 200); // 200ms later
        });
        $("#Logo").addClass("logomove");
    }
);

Answer 2

问题，为什么不使用带关键帧的动画呢？如：

@-webkit-keyframes handMove {
  50% { -webkit-transform: translateY(300px); /** Safari & Chrome **/ }
  100% { -webkit-transform: translateY(-300px); /** Safari & Chrome **/ }
}

除非您需要动画因任何其他原因而完成所需的时间，否则这将完成元素向上移动然后向下移动。

如何使用JavaScript测量动画发生的时间

2 个答案: