forked from HenrikJoreteg/create-keyframe-animation
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
130 lines (108 loc) · 3.28 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
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
/*global getComputedStyle */
var defaults = require('lodash.defaults')
var prefixedEvent = require('prefixed-event')
var loadStyles = require('load-styles')
var createAnimation = require('./lib/create-keyframe-animation')
var animationProperty = require('./lib/animation-property')
var promisify = require('native-promisify-if-present')
var addUnit = require('./lib/add-unit')
// make portions of this server testable
if (typeof window !== 'undefined') {
var transformProperty = require('transform-property')
}
// our storage for registered animations
var registeredAnimations = {}
var mainDefaults = {
duration: 1000,
fillMode: 'both',
easing: 'ease',
iterations: 1,
delay: 0,
direction: 'normal',
resetWhenDone: false,
clearTransformsBeforeStart: false
}
exports.hasAnimation = function (name) {
return registeredAnimations.hasOwnProperty(name)
}
function setAnimationProp (els, val, opts) {
var clearTransforms = (opts && opts.clearTransforms === true)
// we got a collection, potentially
for (var i = 0, l = els.length; i < l; i++) {
// we do both because... chrome does both
if (clearTransforms) {
clearTransformProp(els[i])
}
els[i].style[animationProperty] = val
}
}
function clearTransformProp (el) {
el.style.transform = ''
el.style[transformProperty] = ''
}
function clearAnimationProp (el) {
el.style[animationProperty] = ''
el.style.animation = ''
}
function setAnimationAsTransform (els, opts) {
var clearAnimations = (opts && opts.clearAnimations === true)
// we got a collection, potentially
for (var i = 0, l = els.length; i < l; i++) {
els[i].style[transformProperty] = getComputedStyle(els[i])[transformProperty]
if (clearAnimations) clearAnimationProp(els[i])
}
}
exports.runAnimation = promisify(function (els, opts, cb) {
cb || (cb = function () {})
if (typeof opts === 'string') {
opts = {
name: opts
}
}
if (!els.length) {
els = [els]
}
if (!opts.name) {
return cb(Error('must supply animation name'))
}
var found = registeredAnimations[opts.name]
if (!found) {
return cb(Error('no animation named "' + opts.name + '" exists'))
}
opts = defaults(opts, found.presets, mainDefaults)
var animationEnd = function () {
prefixedEvent.remove(els[0], 'AnimationEnd', animationEnd)
if (opts.resetWhenDone) {
setAnimationAsTransform(els, {clearAnimations: true})
}
return cb(null, els)
}
prefixedEvent.add(els[0], 'AnimationEnd', animationEnd)
var styles = [
opts.name,
addUnit(opts.duration, 'ms'),
opts.easing,
opts.iterations,
addUnit(opts.delay, 'ms'),
opts.direction,
opts.fillMode
]
setAnimationProp(els, styles.join(' '), {clearTransforms: opts.clearTransformsBeforeStart})
})
exports.unregisterAnimation = function (name) {
if (exports.hasAnimation(name)) {
var styleEl = registeredAnimations[name].el
styleEl.parentNode.removeChild(styleEl)
delete registeredAnimations[name]
}
}
exports.getAnimationCSS = createAnimation
exports.registerAnimation = function (opts) {
exports.unregisterAnimation(opts.name)
var el = loadStyles(exports.getAnimationCSS(opts.name, opts.animation))
el.setAttribute('data-name', opts.name)
registeredAnimations[opts.name] = {
el: el,
presets: opts.presets || {}
}
}