Velocity.js: 如何停止队列但使元素进入最终状态？

Question

我很想停止动画队列并使元素进入该队列的最终状态。

$el.velocity('finish', true) 只能使 $el 转到队列中 当前动画的末尾 而忽略所有剩余的动画。

这里 demo 可能更好地解释了这一点。

Answer 1

理论上，运行总持续时间为 0 的动画队列应该会立即播放出所有效果。这似乎不起作用，但它会持续 1 毫秒。

ydaniv 指出 Velocity API 包含一个 mock 属性，它允许 duration: 0 行为：mock: true。 Velocity.js API for mock.

我在您的代码中添加了三行（停止函数中有 2 行，开始时有 1 行），它们使用 mock 来实现 0 毫秒的持续时间：

$('.stop').click(function (){
  // Stop and clear the animation queue.
  $(".animate").velocity('finish', true);
  // Enable mocking, and play out the animation instantly.
  $.Velocity.mock = true;
  $(".animate").velocity('callout.twirl');
})

// ...

function start(){
    // Reset the instant mocking, and start the animation properly.
    $.Velocity.mock = false;
    $(".animate").velocity('callout.twirl')
}

演示：Codepen (using mock).

警告：动画 div 会阻止用户单击停止。请注意，您仍然需要像以前一样完成动画队列。

我原来的解决方案（持续时间为 1 毫秒）可能效率不高，但之后不需要重置 mock。 使用 mock 也会阻止你用它测试你的 UI，所以我包含了原始解决方案：

$('.stop').click(function (){
  // Stop and clear the animation queue.
  $(".animate").velocity('finish', true);
  // Play out the animation, effectively immediately.
  $(".animate").velocity('callout.twirl', { duration: 1 });
})

演示：Codepen (using 1 ms duration).

我强烈建议您尝试保留 mock 的预期功能，方法是使用更粗糙的 duration 方法，或者创建一个将为您管理模拟变量的结构，基于您自己的半全局设置（即，如果您启用了非本地模拟，请临时交换 finish 变体前后的值）。

Velocity.js: 如何停止队列但使元素进入最终状态？

Velocity.js: How to stop a queue but make the element go to its final state?

javascript

velocity.js