Javascript Slidein元素在动画之前可见

从该网站加载时，我正在尝试重新创建动画：

我认为他们正在使用velocity.js来制作动画

我尝试重新创建了一些，并取得了成功（尽管不确定是否正确地执行）。但有一个问题是，元素在那里，然后它们会产生动画（slidein），而正确地说，它们应该被隐藏，然后滑入，使它们变得可见（比如在网站上）。我查看了文档，我认为这应该是预期的行为？但在我的示例中，它不是这样工作的

我运行的动画顺序如下所示： 他们应该模仿我试图模仿的那个网站的动画

var loading = [
     { elements: $(".logo-line-before"), properties: {width: '100%'}},
     { elements: $(".logo-line-after"), properties: {width: '100%'}, options: { sequenceQueue: false }},
     { elements: $(".ttl"), properties:"transition.slideDownIn"},
     { elements: $(".ui.top.vertical.segment"), properties:"transition.slideDownBigIn"}
]; 

$.Velocity.RunSequence(loading);

---

这都是使用Velocity V1，因此可用的帮助有限（不再支持），但是您确实需要为

opacity:0

预加载元素，无需更改元素上的

display

属性，因为它只是元素上的“get it visible”（使其可见）动画，仍然需要占用空间

---

我建议只需在HTML源代码中的每一个元素上添加一个

style=“opacity:0；”“

，然后从那里开始。

哦，谢谢，这确实有效。我将尝试使用最新版本的velocity，但我在兼容性方面遇到了一些问题，所以需要检查一下。但还有一件事看起来有点麻烦，当这两条黑线都在动画中时，它们之间的元素会明显扩展。我尝试在该元素

ttl

上增加边距，但不起作用。