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秒，因此我只会在内容加载时看到整个动画过程。

感谢您的帮助。

SOLUTION：

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

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

感谢Clement的提示。

Answer 1

您可以使用queue（或已完成的......）这样的velocity.js选项：

选项：队列

您可以将queue设置为false以强制进行新的动画调用   立即与任何当前活动的动画并行运行。

/ *触发第一个动画（宽度）。 / $ element.velocity（{width：   ＆＃34; 50像素＆＃34; }，{duration：3000}）; //运行3s setTimeout（function（）{       / 将从1500ms开始并行运行。 * /       $ element.function call＆＃34;＆gt; velocity（{height：＆＃34; 50px＆＃34;}，{queue：false}）; }，1500 // 1500ms标记）;

或者，自定义队列 - 不立即启动的队列    - 可以通过传递队列自定义队列的名称来创建。您   可以并行构建多个自定义队列，然后再启动它们   单独通过$ element.dequeue（＆＃34; queueName＆＃34;）（或   Velocity.Utilities.dequeue（element（s），＆＃34; queueName＆＃34;）如果您正在使用   没有jQuery的速度）。

请注意，loop选项和reverse命令不适用于custom   和并行队列。

Velocity使用与jQuery相同的排队逻辑，因此   与$ .animate（），$ .fade（）和$ .delay（）无缝互操作。至   了解Velocity排队行为的更多信息，请阅读本入门书。

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

Answer 2

您可以使用RunSequence（），请参阅此example

/* jquery.js */
/* velocity.js */
/* velocity.ui.js */

var $element1 = $("div").eq(0),
    $element2 = $("div").eq(1),
    $element3 = $("div").eq(2);

var mySequence = [
    { e: $element1, p: { translateX: "+=100" } },
    { e: $element2, p: { translateX: "+=100" }, options: { sequenceQueue: false } },
    { e: $element3, p: { translateY: "+=100" } }
  ];

$.Velocity.RunSequence(mySequence);

Answer 3

您也可以使用Here中给出的Velocity Promises来实现这一点。

/* Using Velocity's utility function... */
$.Velocity.animate(element, { opacity: 0.5 })
    /* Callback to fire once the animation is complete. */
    .then(function(elements) { console.log("Resolved."); })
    /* Callback to fire if an error occurs. */
    .catch(function(error) { console.log("Rejected."); });

如何在第一次结束时启动新的velocity.js效果？

3 个答案: