Velocity JS 和动态 DOM 内容插入序列

Question

我对 Velocity JS 比较陌生。我想介绍一些字符（包含图像 URL 和名称的对象），例如图像和名称从左到右交替出现的过渡序列。我已经编写了代码并且它可以工作，但是有一个主要问题，我觉得我的方法存在一些概念上的错误。

不幸的是，我无法从大系统中提取一个工作代码示例。但基本上在 Backbone JS 中，我选择元素并将其 .html() 设置为来自数据库的某些内容，并将此调用与对 velocity.

的调用链接起来

举个例子：

@$eventResultAvatarContainer.html("<img src=#{@avatarURLs[0]}>").velocity('transition.bounceLeftIn', { duration: 2000, complete: @entryIntroduction })

有效，但顺序如下：

首先元素在容器中显示一瞬间。
然后 velocity 的调用动画对象进出。

我怎样才能摆脱上面的 1. 即在链式调用执行之前，有没有办法让元素在速度动画开始之前不可见？

Answer 1

在没有看到实际代码的情况下无法确定，但请尝试使用 style="visibility:hidden;" 隐藏 eventResultAvatarContainer，然后使用 .css({visibility:'visible'}) 在 .velocity 之前显示它们。

这可以确保在速度有机会作用于元素之前不会渲染该元素。

我做了一个 jsfiddle 来尝试模拟你的环境，你可以用它来做进一步的测试，或者尽可能地尝试重新创建你的环境。

http://jsfiddle.net/gdp2suet/2/

Velocity JS 和动态 DOM 内容插入序列

Velocity JS and dynamic DOM content insertion sequence

javascript

dom

backbone.js

velocity.js