Slidein 元素在动画之前可见

Question

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

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

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

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

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

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 属性因为它只是元素上的 "get it visible" 动画，仍应占用 space.

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

Slidein 元素在动画之前可见

Slidein element is visible before the animation

javascript

animation

velocity.js