forked from ygs-code/vue
-
Notifications
You must be signed in to change notification settings - Fork 1
/
getTransitionInfo.html
128 lines (120 loc) · 5.02 KB
/
getTransitionInfo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
div
{
width:100px;
height: 100px;
background: red;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
</style>
<div id="div">
</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)
debugger
/* istanbul ignore next */
while (delays.length < durations.length) {
delays = delays.concat(delays);
}
return Math.max.apply(null, durations.map(function (d, i) {
return toMs(d) + toMs(delays[i])
}))
}
//获取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('transition', function () {
debugger;
console.log('transition')
});
</script>
</body>
</html>