javascript - 如何仅在第一个结束时才开始新的 velocity.js 效果？

Question

我有一个带有 velocity.js 和动画的 ajax 应用程序(一个用于内容包装器的全局动画，用于使屏幕外的内容动画化，以及正在加载的内容中的动画)。

对于每个页面调用，我的脚本首先使用类似这样的动画将内容包装器从屏幕上移开:

$('#main').velocity("transition.slideRightBigOut", { duration: 500 });

然后我加载的内容中的一个新脚本将内容本身动画化到屏幕上:

$('#main').velocity("transition.slideRightBigIn", { duration: 500 });

但是整个体验感觉有点怪怪的。动画感觉像“交错”，尤其是当我加载的内容相当大时。

我试图做的只是像这样将 slideRightBigIn 转换作为一个函数放在 slideRightBigOut 转换中:

$('#main').velocity("transition.slideRightBigOut", { duration: 500 }, function() {
    $('#main').velocity("transition.slideRightBigIn", { duration: 500 });
});

当然，在这种情况下，我通过加载的内容来控制动画。但这并不像我想要的那样工作，因为内容可能会加载 5 秒，因此我只会在内容加载时看到整个动画过程。

感谢您的帮助。

解决方案:

我案例的最终解决方案是在 setTimeout 函数的成功调用中包装构建 ajax 加载内容的函数，超时等于在 beforeSend 调用中调用的 slideRightBigOut 动画的长度。

“加载”动画 slideRightBigIn 没有从加载的内容调用任何更改。

感谢 Clement 的提示。

Answer 1

你有 velocity.js 的选项，比如 queue(或 completed...):

Option: Queue

You can set queue to false to force a new animation call to immediately run in parallel with any currenty-active animations.

/* Trigger the first animation (width). / $element.velocity({ width: "50px" }, { duration: 3000 }); // Runs for 3s setTimeout(function() { / Will run in parallel starting at the 1500ms mark. */ $element.function call">velocity({ height: "50px" }, { queue: false }); }, 1500 // 1500ms mark);

Alternatively, a custom queue — a queue that doesn't immediately start — can be created by passing queue the name of your custom queue. You can build multiple custom queues in parallel, then later start them individually via $element.dequeue("queueName") (or Velocity.Utilities.dequeue(element(s), "queueName") if you're using Velocity without jQuery).

Note that the loop option and reverse command do not work with custom and parallel queues.

Velocity uses the same queueing logic as jQuery, and thus interoperates seamlessly with $.animate(), $.fade(), and $.delay(). To learn more about Velocity's queueing behavior, read this primer.

http://julian.com/research/velocity/#queue