如何将(CSS/HTML）的包链接在一起.CSS/HTML->CSS/HTML->CSS/HTML

How do I chain together package of (CSS/HTML). CSS/HTML -> CSS/HTML -> CSS/HTML

本文关键字：CSS HTML- gt HTML 在一起 链接 包链接      更新时间：2024-01-13

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

将它们链接在一起并在另一个之后触发包（CSS/HTML）的最佳方式是什么？

例如：一旦动画A（lorem.css/lorem.html）完成，它将触发动画B，即（ipsum.css/ipsum.html）

为了便于管理，我很想把他们分开。

我想知道我们是否可以使用Handlebars.js？由于每个HTML文件之间的区别在于body标记。那么，我可以只为每个HTML文件的body标记设置模板，然后在当前动画结束时将其交换到下一个body块吗？

谢谢。

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

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

是的，在正在制作动画的元素上触发了ontransioned事件，这也为webkit和opera提供了供应商前缀的事件。然后，您可以通过查看来查看此事件对应的动画

event.originalEvent.propertyName

U应该为此使用一些JS，好的是；）你不需要jquery。

你可以听（eventlistener）：（不介意这个符号，只是从我自己的经理那里复制的）

'WebkitTransition':'webkitTransitionEnd',
'MozTransition':'transitionend',
'OTransition':'oTransitionEnd otransitionend',
'msTransition':'MSTransitionEnd',
'transition':'transitionend'

根据浏览器的不同，动画端也是如此

element.addEventListener("transitionend", function(){
  //do whatever
},false);

或者创建一些函数来自动检测浏览器，为其创建一个变量，并将其添加到even监听器中。（我推荐，现代化的方式）

这样，你就可以创建一个cssclass，包含动画属性，并将其添加到元素中，当动画/过渡完成时，它会触发并结束。

因此，我们的想法是创建某种函数/管理器，在结束时删除类，并将下一个添加到同一个元素或之后的下一个元素

旁注：当你在或动画中出于某种原因添加填充（顶部填充/左侧填充）时，（这只是一个例子）它会检测到两个结尾，而不仅仅是一个添加"填充"的结尾（至少chrome就是这样做的，但忘了浏览器版本是什么，你必须稍微处理一下）

请看一下我在这里的回答，以便得到完整的解释CSS3链动画

相关文章：