forked from ygs-code/vue
-
Notifications
You must be signed in to change notification settings - Fork 1
/
getTransitionInfo获取css3 Transition 信息2.html
167 lines (144 loc) · 5.81 KB
/
getTransitionInfo获取css3 Transition 信息2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
}
.div1{
margin-top: 100px;
transform:perspective(500px) rotatey(0deg);
transform-style:preserve-3d;
position: relative;
border:1px solid #000000;
}
.div1 .div1_1{
background-color: #ff0000;
transform:rotatey(45deg);
position: absolute;
font-size: 80px;
line-height: 200px;
text-align: center;
top: 0;
left: 0;
}
</style>
<div class="div1" >
<div class="div1_1" id="div">1</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) {
/* 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])
}))
}
function getmatrix(a,b,c,d){
//更多http://www.5imoban.net/jiaocheng/jquery/201710182975.html
var aa=Math.round(180*Math.asin(a)/ Math.PI);
var bb=Math.round(180*Math.acos(b)/ Math.PI);
var cc=Math.round(180*Math.asin(c)/ Math.PI);
var dd=Math.round(180*Math.acos(d)/ Math.PI);
var deg=0;
if(aa==bb||-aa==bb){
deg=dd;
}else if(-aa+bb==180){
deg=180+cc;
}else if(aa+bb==180){
deg=360-cc||360-dd;
}
return deg>=360?0:deg;
//return (aa+','+bb+','+cc+','+dd);
}
//获取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')))
</script>
</body>
</html>