blob: f554b33177774be8b039cf852569ca93b2ee999e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: 检测CSS动画的支持性
slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
---
<p>{{CSSRef}}</p>
<p>CSS 动画 使仅用CSS属性来使内容呈现动画效果成为一种可能，然而，某些时候CSS动画属性并不能生效，此时，我们希望能够通过javascript代码来实现相似的动画效果。针对此种情况，本文基于Chris Heilmann的 <a href="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">this blog post</a> 对该技术进行了示范。</p>
<h2 id="CSS动画支持检测">CSS动画支持检测</h2>
<p>下面的代码将检测CSS动画的支持性是否是有效的。</p>
<pre class="brush: js">var animation = false,
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '',
elm = document.createElement('div');
if( elm.style.animationName !== undefined ) { animation = true; }
if( animation === false ) {
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}
</pre>
<p>首先先定义几个变量，并通过初始化<code>animation</code> 为false来假设不支持CSS动画属性，先设置animationstring变量为<code>animation并在稍后进行修改。创建一个浏览器前缀的数组用来循环遍历并设置pfx前缀为空字符串。</code> </p>
<p>然后，检测创建的elm元素的style属性集合中{{ cssxref("animation-name") }} 属性是否被设置，如果被设置，则意味着着浏览器支持CSS animation属性，而不需要加任何前缀，然而到目前，还没有任何浏览器实现（译者：chrome中试验了一下是可以的）；</p>
<p>如果浏览器不支持无前缀的animation，那么animation变量值仍为false，遍历所有可能的浏览器前缀，由于所有的主流浏览器现在都在该属性前加了前缀，因此在<code>AnimationName</code> 前加上前缀即可。</p>
<p>当代码执行完，如果浏览器不支持CSS animation属性，则返回animation 为false，否则为true。如果animation为true，则所有animation 相关属性名称以及keyframes属性前缀都是检测到的正确的，因此，如果使用firefox，属性名称就是MozAnimation，keyframes前缀就是-moz-，如果使用chrome，属性为<code>WebkitAnimation</code> ，keyframes前缀为 <code>-webkit-。注意，浏览器是不方便在驼峰法和连字符法之间进行切换的。</code></p>
<h2 id="针对不同浏览器使用正确语法实现动画效果">针对不同浏览器使用正确语法实现动画效果</h2>
<p>现在可以知道，无论浏览器是否支持CSS animation，均可以实现动画效果。</p>
<pre class="brush: js">if( animation === false ) {
// animate in JavaScript fallback
} else {
elm.style[ animationstring ] = 'rotate 1s linear infinite';
var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
'}';
if( document.styleSheets && document.styleSheets.length ) {
document.styleSheets[0].insertRule( keyframes, 0 );
} else {
var s = document.createElement( 'style' );
s.innerHTML = keyframes;
document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
}
}
</pre>
<p>以上代码主要根据animation的值来进行不同的操作，如果为false,则需要执行javascript脚本来实现动画效果，否则，就用javascript来创建所需要的CSS animation 效果。</p>
<p>设置animation属性是很简单的，可以在style属性集合中简单的更新它的值。然而，增加keyframes是有难度的，由于它们不能够通过传统的css语法来定义。（虽然这样使得它们更加灵活，但是通过脚本来定义更加不易）</p>
<p>使用javascript来定义keyframes，需要将其具体语法写为字符串。为了创建keyframes变量，在构建keyframes时要在其所有属性前加前缀，该变量包含完整的所有动画序列所需要的keyframes描述。</p>
<p>下一个任务是将创建的keyframes添加到实际的CSS中。首先要检查是否在document中存在CSStylesheet，如果存在，则能够简单的将keyframes值插入到CSSstylesheet中。</p>
<p>如果不存在CSSstylesheet，创建一个新的 {{ HTMLElement("style") }} 元素，并将keyframes设置为其内容。然后将新的{{ HTMLElement("style") }}元素插入到document 的head中，从而将新的style sheet添加到了html文档中。</p>
<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">在JSFiddle中查看</a></p>
<h2 id="更多">更多</h2>
<ul>
<li><a href="/en/CSS/CSS_animations" title="en/CSS/CSS animations">CSS animations</a></li>
</ul>
|
