-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.js
58 lines (53 loc) · 2.35 KB
/
index.js
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
function $(expr, con) {
return (con || document).querySelector(expr);
}
function $$(expr, con) {
return [].slice.call((con || document).querySelectorAll(expr))
}
$$('div[data-property]').forEach(function (el, i) {
let property = el.getAttribute('data-property')
el.addEventListener('mouseenter', function () {
if (!el.className.includes('animated')) {
el.className += " animated infinite"
}
})
el.addEventListener('mouseleave', function () {
if (el.className.includes('animated')) {
el.className = el.className.replace(" animated infinite", "")
}
})
el.addEventListener('click', function () {
let CSSStyleDeclaration = getComputedStyle(el)
let animation = CSSStyleDeclaration.animation,
animationName = CSSStyleDeclaration.animationName,
animationDelay = CSSStyleDeclaration.animationDelay,
animationDirection = CSSStyleDeclaration.animationDirection,
animationDuration = CSSStyleDeclaration.animationDuration,
animationFillMode = CSSStyleDeclaration.animationFillMode,
animationIterationCount = CSSStyleDeclaration.animationIterationCount,
animationTimingFunction = CSSStyleDeclaration.animationTimingFunction
if (!animation) {
animation = [animationName, animationDuration, animationTimingFunction, animationDelay, animationFillMode, animationIterationCount, animationDirection].join(' ')
}
let info = $('#info'),
author = el.getAttribute('data-author') || 'leaverou'
$('h1', info).innerHTML = el.getAttribute('data-property')
$('dd:first-of-type', info).innerHTML = animation
if (author === 'Animate.css') {
$('dd:nth-of-type(2)', info).innerHTML = '<a href="https://daneden.github.io/animate.css/" target="_blank">@' + author + '</a>'
} else {
$('dd:nth-of-type(2)', info).innerHTML = '<a href="http://twitter.com/' + author + '" target="_blank">@' + author + '</a>'
}
})
});
function findKeyframesRule(rule) {
let ss = document.styleSheets;
for (let i = 0; i < ss.length; ++i) {
for (let j = 0; j < ss[i].cssRules.length; ++j) {
if (ss[i].cssRules[j].name == rule) {
return ss[i].cssRules[j].cssText
}
}
}
return ''
}