Question

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

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

我尝试重新创建这种方法，并且成功了一些（尽管不确定这样做是否正确）。但是，存在一个问题，即元素在那里存在，然后进行动画处理（slidein），而正确地应该将它们隐藏起来然后滑动以使其可见（如在网站上）。我查看了文档，我认为这应该是预期的行为吗？但是在我的示例中，它不是那样工作的。

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;"，然后从那里开始。

滑动元素在动画之前可见

1 个答案: