forked from ygs-code/vue
-
Notifications
You must be signed in to change notification settings - Fork 1
/
getTransitionInfo获取css3 Transition 信息.html
241 lines (208 loc) · 8.84 KB
/
getTransitionInfo获取css3 Transition 信息.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
div
{
width:100px;
height:100px;
background:red;
background:-moz-linear-gradient(top,#fff,#F6D66E);
background:-webkit-linear-gradient(top,#fff,#F6D66E);
background:-o-linear-gradient(top,#fff,#F6D66E);
background:-ms-linear-gradient(top,#fff,#F6D66E);
background:linear-gradient(top,#fff,#F6D66E);
-moz-transform:translate(600px,450px);
-webkit-transform:translate(600px,450px);
-o-transform:translate(600px,450px);
-ms-transform:translate(600px,450px);
transform:translate(600px,450px);
-moz-animation:animations2 3s ease,animations 6s ease 3s, animations1 9s ease 3s;
-webkit-animation:animations2 3s ease,animations 6s ease 3s, animations1 9s ease 3s;
-o-animation:animations2 3s ease,animations 6s ease 3s, animations1 9s ease 3s;
-ms-animation:animations2 3s ease,animations 6s ease 3s, animations1 9s ease 3s;
animation:animations2 3s ease,animations 6s ease 3s, animations1 9s ease 3s;
}
@-webkit-keyframes animations{
0%{-webkit-transform:translate(0,0);}
55%{-webkit-transform:translate(480px,360px);}
100%{-webkit-transform:translate(600px,450px);}
}
@-moz-keyframes animations{
0%{-moz-transform:translate(0,0);}
55%{-moz-transform:translate(480px,360px);}
100%{-moz-transform:translate(600px,450px);}
}
@-o-keyframes animations{
0%{-o-transform:translate(0,0);}
55%{-o-transform:translate(480px,360px);}
100%{-o-transform:translate(600px,450px);}
}
@-ms-keyframes animations{
0%{-ms-transform:translate(0,0);}
55%{-ms-transform:translate(480px,360px);}
100%{-ms-transform:translate(600px,450px);}
}
@keyframes animations{
0%{transform:translate(0,0);}
55%{transform:translate(480px,360px);}
100%{transform:translate(600px,450px);}
}
@-webkit-keyframes animations1{
0%{-webkit-transform:translate(0,0);}
55%{-webkit-transform:translate(180px,160px);}
100%{-webkit-transform:translate(100px,150px);}
}
@-moz-keyframes animations1{
0%{-moz-transform:translate(0,0);}
55%{-webkit-transform:translate(180px,160px);}
100%{-webkit-transform:translate(100px,150px);}
}
@-o-keyframes animations1{
0%{-o-transform:translate(0,0);}
55%{-webkit-transform:translate(180px,160px);}
100%{-webkit-transform:translate(100px,150px);}
}
@-ms-keyframes animations1{
0%{-ms-transform:translate(0,0);}
55%{-webkit-transform:translate(180px,160px);}
100%{-webkit-transform:translate(100px,150px);}
}
@keyframes animations1{
0%{transform:translate(0,0);}
55%{-webkit-transform:translate(180px,160px);}
100%{-webkit-transform:translate(100px,150px);}
}
@-moz-keyframes animations2{
0%{-moz-transform:translate(0,0);}
100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes animations2{
0%{-webkit-transform:translate(0,0);}
100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes animations2{
0%{-o-transform:translate(0,0);}
100%{-o-transform:translate(0,0);}
}
@-ms-keyframes animations2{
0%{-ms-transform:translate(0,0);}
100%{-ms-transform:translate(0,0);}
}
@keyframes animations2{
0%{transform:translate(0,0);}
100%{transform:translate(0,0);}
</style>
<div id="div">
</div>
<div id="div2">
</div>
<script>
var inBrowser=true;
var isIE9=false;
var hasTransition = inBrowser && !isIE9;
var TRANSITION = 'transition';
var ANIMATION = 'animation';
// Transition property/event sniffing
var transitionProp = 'transition';
var transitionEndEvent = 'transitionend';
var animationProp = 'animation';
var animationEndEvent = 'animationend';
var transformRE = /\b(transform|all)(,|$)/;
function toMs(s) {
return Number(s.slice(0, -1)) * 1000
}
function getTimeout(
delays, //延迟时间
durations //执行的时间
) {
console.log(delays)
console.log(durations)
console.log(delays.length < durations.length)
/* istanbul ignore next */
while (delays.length < durations.length) {
delays = delays.concat(delays);
}
let max = Math.max.apply(null, durations.map(function (d, i) {
return toMs(d) + toMs(delays[i])
}))
console.log(max);
return max
}
//获取transition，或者animation 动画的类型，动画个数，动画执行时间
function getTransitionInfo(
el, //真实的dom
expectedType //动画类型
) {
// Window.getComputedStyle()方法返回一个对象，
// 该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值
// 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
var styles = window.getComputedStyle(el); //
console.log('==styles==')
console.log(styles)
// var transitionProp = 'transition';
var transitionDelays = styles[transitionProp + 'Delay'].split(', '); //获取动画时间
var transitionDurations = styles[transitionProp + 'Duration'].split(', '); //获取动画时间
//transitionDelays=5s
var transitionTimeout = getTimeout(transitionDelays, transitionDurations);//获取动画时间
var animationDelays = styles[animationProp + 'Delay'].split(', ');//获取动画时间
var animationDurations = styles[animationProp + 'Duration'].split(', ');//获取动画时间
var animationTimeout = getTimeout(animationDelays, animationDurations); //获取动画时间
console.log('transitionDelays='+transitionDelays)
console.log('transitionDurations='+transitionDurations)
console.log('transitionTimeout='+transitionTimeout)
console.log('animationDelays='+animationDelays)
console.log('animationDurations='+animationDurations)
console.log('animationTimeout='+animationTimeout)
var type; //动画类型
var timeout = 0; //动画时长
var propCount = 0; //动画个数
/* istanbul ignore if */
if (expectedType === TRANSITION) {// 判断动画是否是transition
if (transitionTimeout > 0) {
type = TRANSITION;
timeout = transitionTimeout;
propCount = transitionDurations.length;
}
} else if (expectedType === ANIMATION) { //判断动画是否是animation
if (animationTimeout > 0) {
type = ANIMATION;
timeout = animationTimeout;
propCount = animationDurations.length;
}
} else {
timeout = Math.max(transitionTimeout, animationTimeout);
type = timeout > 0
? transitionTimeout > animationTimeout
? TRANSITION
: ANIMATION
: null;
propCount = type
? type === TRANSITION
? transitionDurations.length
: animationDurations.length
: 0;
}
var hasTransform =
type === TRANSITION &&
transformRE.test(styles[transitionProp + 'Property']);
console.log(styles[transitionProp + 'Property']) //获取动画设置在哪些属性上面
return {
type: type,//过度或者css3动画类型
timeout: timeout, //执行动画的时长
propCount: propCount, //动画个数 执行多个动画
hasTransform: hasTransform //布尔值 是不是 transition 动画
}
}
console.log(getTransitionInfo(document.getElementById('div')))
document.getElementById('div').addEventListener('animations', function () {
debugger;
console.log('animations')
});
</script>
</body>
</html>