新闻资讯

用JavaScript控制CSS动画使

JavaScript是视频和CSS动画之间的粘合剂。有没有办法对夫妇一个动画到视频纯粹使用CSS。动画不启动，直到一个样式被应用，并且使用CSS可以只有这么多方式触发额外的样式（如：悬停）。为了同步动画视频，我们需要暂停，停止，恢复，跳过中间，甚至反向运行的动画。

所有这一切都可能是用JavaScript。所以，第一步是让CSS动画出来的样式表和JavaScript的进入。每一个CSS动画有两个部分。第一部分是关键帧，并用于配置如何动画的行为属性，如时间，迭代和方向。第二个部分是什么触发动画。Charlie.js需要找到两个部分的样式表。

我们需要做的第一件事是一个实用的功能通过在页面上加载的样式表来搜索。

findRules = function(matches){

		//document.stylesheets is not an array by default.
		// It's a StyleSheetList. toArray converts it to an actual array.
		var styleSheets = _.toArray(document.styleSheets),
		rules = [];

		// forEach iterates through a list, in this case passing
		//every sheet in styleSheets to the next forEach
		_.forEach(styleSheets, function(sheet){

		//This foreach iterates through each rule in the style sheet
		//and checks if it passes the matches function.
		_.forEach(_.toArray(sheet.cssRules), function(rule){
			if (matches(rule)){
				rules.push(rule);
			}
		});
	});
return rules;
}

该findRules通过每一个样式表的每一条规则函数遍历并返回匹配传入的规则列表匹配功能。要获得所有的关键帧的规则，我们传递一个函数来findRules，检查规则是否是关键帧：

// A little code to handle prefixed properties
	var KEYFRAMES_RULE = window.CSSRule.KEYFRAMES_RULE
		|| window.CSSRule.WEBKIT_KEYFRAMES_RULE
		|| window.CSSRule.MOZ_KEYFRAMES_RULE
		|| window.CSSRule.O_KEYFRAMES_RULE
		|| window.CSSRule.MS_KEYFRAMES_RULE,

		...

		var keyframeRules = findRules(function(rule){
			return KEYFRAMES_RULE === rule.type;
		}),

		...

在这一点上，我们在JavaScript中的关键帧，但我们仍然需要的动画风格定义时间，迭代，方向等休息。

找到所有这些类，我们再次使用findRules功能要经过每一个样式表中每一条规则。这一次，虽然，匹配功能，我们将传递将检查规则是否有animationName财产。

...

	var animationStyleRules = findRules(function(rule){
		return rule.style && rule.style[animationName(rule.style)];
	});

	...

该animationsName功能是有处理前缀，因为animationName属性仍然需要在某些浏览器前缀。该函数看起来像这样：

...

if (style.animationName) {
	name = "animationName"; }
else if (style.webkitAnimationName)