v1.0.4

ThrivingKings · Jun 6, 2016 · 126b074 · 126b074
1 parent 77246fa
commit 126b074
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 51 deletions.
diff --git a/packages/animate/package.json b/packages/animate/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animo-animate",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "animo animation handler",
   "repository": "https://github.com/ThrivingKings/animo/tree/master/packages/animate",
   "keywords": [

diff --git a/packages/animo/package.json b/packages/animo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animo-core",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "animo animation core",
   "repository": "https://github.com/ThrivingKings/animo/tree/master/packages/animo",
   "keywords": [

diff --git a/packages/animo/src/index.js b/packages/animo/src/index.js
@@ -16,31 +16,43 @@ const VENDOR_TRANSITIONS = [
   'webkitTransition'
 ]
 
-const VENDOR_ANIMATION_LISTENERS = {
-  'animation': 'animationend',
-  'OAnimation': 'oAnimationEnd',
-  'MozAnimation': 'animationend',
-  'WebkitAnimation': 'webkitAnimationEnd'
+const VENDOR_PREFIXED_LISTENERS = {
+  'animation': {
+    animationEnd: 'animationend',
+    transitionEnd: 'transitionend'
+  },
+  'OAnimation': {
+    animationEnd: 'oAnimationEnd',
+    transitionEnd: 'oTransitionEnd'
+  },
+  'MozAnimation': {
+    animationEnd: 'animationend',
+    transitionEnd: 'transitionend'
+  },
+  'WebkitAnimation': {
+    animationEnd: 'webkitAnimationEnd',
+    transitionEnd: 'webkitTransitionEnd'
+  }
 }
 
-const whichAnimationEvent = () => {
+const whichVendor = () => {
   const el = document.createElement('fakeelement')
 
-  for (const a in VENDOR_ANIMATION_LISTENERS) {
+  for (const a in VENDOR_PREFIXED_LISTENERS) {
     if (el.style[a] !== undefined) {
-      return VENDOR_ANIMATION_LISTENERS[a]
+      return VENDOR_PREFIXED_LISTENERS[a]
     }
+
+    return VENDOR_PREFIXED_LISTENERS.animation
   }
 }
 
 const animo = (element, options = {}) => {
   const state = {
-    interval: null,
     iteration: 0
   }
 
   const defaultProps = {
-    interval: 500,
     iterate: 1,
     isAnimation: false,
     onComplete: () => {},
@@ -54,6 +66,7 @@ const animo = (element, options = {}) => {
 
     const originalStyles = element.style
     const props = { ...defaultProps, ...options }
+    const vendor = whichVendor()
     const animoEl = {
       css: (styles) => {
         Object.assign(element.style, styles)
@@ -73,29 +86,29 @@ const animo = (element, options = {}) => {
       }
     }
 
-    const animationStep = () => {
-      if (state.iteration === props.iterate) {
-        state.interval = clearInterval(state.interval)
-        state.interval = null
+    const animationStep = (event) => {
+      element.removeEventListener(vendor.transitionEnd, animationStep)
 
+      if (state.iteration === props.iterate) {
         props.onComplete({ ...animoEl, raw: element })
         return resolve(element)
       }
 
       props.onIteration({ ...animoEl, raw: element })
+      element.addEventListener(vendor.transitionEnd, animationStep)
       state.iteration++
     }
 
-    animationStep()
-
     if (!props.isAnimation) {
-      state.interval = setInterval(animationStep, props.interval)
+      element.addEventListener(vendor.transitionEnd, animationStep)
     } else {
-      element.addEventListener(whichAnimationEvent(), () => {
+      element.addEventListener(vendor.animationEnd, () => {
         props.onComplete({ ...animoEl, raw: element })
         return resolve(element)
       })
     }
+
+    animationStep()
   })
 }
 

diff --git a/packages/animo/src/tests/animo.test.js b/packages/animo/src/tests/animo.test.js
@@ -18,33 +18,5 @@ describe('animo-core', () => {
     })
   })
 
-  describe('when given an actual element', () => {
-    const el = document.createElement('fakeEL')
-
-    describe('when requesting two iterations', () => {
-      const options = {
-        iterate: 2,
-        onComplete: expect.createSpy(),
-        onIteration: expect.createSpy()
-      }
-
-      const animoIterations = new animo(el, options)
-      let animoEl
-
-      beforeEach(done => {
-        animoIterations.then(el => {
-          animoEl = el
-          done()
-        })
-      })
-
-      it('iterates twice', () => {
-        expect(options.onIteration.calls.length).toEqual(2)
-      })
-
-      it('completes', () => {
-        expect(options.onComplete).toHaveBeenCalled()
-      })
-    })
-  })
+  // TODO: re-add iteration tests with transitions
 })
diff --git a/packages/rotate/package.json b/packages/rotate/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animo-rotate",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "animo rotation",
   "repository": "https://github.com/ThrivingKings/animo/tree/master/packages/rotate",
   "keywords": [

diff --git a/packages/rotate/src/index.js b/packages/rotate/src/index.js
@@ -17,7 +17,6 @@ const rotate = (el, options) => {
   const { deg, interval, iterate, timing } = props
 
   return new animo(el, {
-    interval,
     iterate,
     onComplete: function(element) {
       if (!props.keep) {