如何将(CSS/HTML)包链接在一起。CSS/HTML -> CSS/ -> -> CSS/HTML

Question

我正在使用与codepen.io类似的纯CSS创建小动画，这些动画有自己的html/css。我很乐意把它们串在一起，创造一个无缝的电影实验。

怎样才能最好地将它们链接在一起，然后触发一个包(CSS/HTML)呢？

一旦动画A(loren.css/loRem.html)完成，它将触发动画B，即(ipsum.css/ipsum.html)。

为了便于管理，我很乐意把它们分开。

我想知道我们是否可以用Handlebars.js来完成这个任务？因为每个HTML文件之间的差异是body标记。所以，我是否可以模板每个HTML文件的body标记，然后在当前动画结束时将其交换到下一个body块？

谢谢。

Answer 1

为了平滑起见，您可以在不同的层中加载所有html。然后将它们叠加在彼此的z-index上，隐藏那些不需要显示的，一旦您想用html显示任何层，并附加css，使用.show()并使用<link href="your css file URL" rel="stylesheet" type="text/css" />将css文件附加到当前的html文件中，我认为这将非常顺利。

Answer 2

您可以使用javascript收听css3动画的ontransitionend事件。然后将新的动画类应用于元素。

Answer 3

是的，在动画元素上触发了永久转换事件，这也为webkit和opera提供了供应商的前缀事件。然后，通过查看以下内容，就可以看到该事件对应的动画。

event.originalEvent.propertyName