javascript - Slidein 元素在动画之前可见

Question

从该网站加载时，我正在尝试重新创建动画: https://uchuhimo.me

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

我尝试重新创建其中的一些并成功了(尽管不确定是否正确执行)。但是有一个问题，元素在那里然后它们动画化(滑入)，而正确地它们应该被隐藏然后它们滑入以便它们变得可见(就像在网站上一样)。我查看了文档，我认为这应该是预期的行为？但在我的示例中，它不是那样工作的。

https://codepen.io/pokepim/pen/EpyKWR

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

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);

Answer 1

以上都是使用 Velocity V1，所以可用的帮助有限(不再支持)，但是您确实需要为 opacity:0 预加载元素，无需更改 display 属性，因为它只是元素上的“让它可见”动画，仍应占用空间。

我建议简单地在 HTML 源代码中的每个元素上添加一个 style="opacity:0;" 并从那里开始。