feat: Support padding in transitionEnd (#96)

* feat: Support padding in transitionEnd

* fix tests

Author: taion

README.md

@@ -59,7 +59,7 @@ require('dom-helpers/css')(node, { width: '40px' })
   - `style(element, propName)` or `style(element, objectOfPropValues)`
   - `getComputedStyle(element)` -> `getPropertyValue(name)`
   - `animate(node, properties, duration, easing, callback)` programmatically start css transitions
-  - `transitionEnd(node, handler, [duration])` listens for transition end, and ensures that the handler if called even if the transition fails to fire its end event. Will attempt to read duration from the element, otherwise one can be provided
+  - `transitionEnd(node, handler, [duration], [padding])` listens for transition end, and ensures that the handler if called even if the transition fails to fire its end event. Will attempt to read duration from the element, otherwise one can be provided
   - `addEventListener(node, eventName, handler, [options])`:
   - `removeEventListener(node, eventName, handler, [options])`:
   - `listen(node, eventName, handler, [options])`: wraps `addEventlistener` and returns a function that calls `removeEventListener` for you

src/transitionEnd.ts

@@ -1,12 +1,9 @@
-import canUseDOM from './canUseDOM'
 import css from './css'
 import listen from './listen'
 
 export type Listener = (this: HTMLElement, ev: TransitionEvent) => any
 
-export const TRANSITION_SUPPORTED = canUseDOM && 'ontransitionend' in window
-
-export function parseDuration(node: HTMLElement) {
+function parseDuration(node: HTMLElement) {
   const str = css(node, 'transitionDuration') || ''
 
   const mult = str.indexOf('ms') === -1 ? 1000 : 1
@@ -45,20 +42,19 @@ function emulateTransitionEnd(
   }
 }
 
-function transitionEnd(
+export default function transitionEnd(
   element: HTMLElement,
   handler: Listener,
-  duration?: number
+  duration?: number | null,
+  padding?: number
 ) {
   if (duration == null) duration = parseDuration(element) || 0
-  const removeEmulate = emulateTransitionEnd(element, duration)
+  const removeEmulate = emulateTransitionEnd(element, duration, padding)
 
-  const remove = listen(element, 'transitionend', handler);
+  const remove = listen(element, 'transitionend', handler)
 
   return () => {
     removeEmulate()
     remove()
   }
 }
-
-export default transitionEnd

test/transition.js

@@ -1,15 +1,38 @@
-const { parseDuration } = require('../src/transitionEnd')
+const transitionEnd = require('../src/transitionEnd')
+
+describe('transitionEnd', () => {
+  let clock
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+  })
+
+  afterEach(() => {
+    clock.restore()
+  })
 
-describe('Transition helpers', () => {
   it('should parse duration from node property', () => {
     const el = document.createElement('div')
 
     el.style.transitionDuration = '1.4s'
+    const handler1 = sinon.spy()
+    transitionEnd(el, handler1)
+
+    clock.tick(1300)
+    expect(handler1.callCount).to.equal(0)
+    expect(handler1).to.not.be.called
 
-    expect(parseDuration(el)).to.equal(1400)
+    clock.tick(200)
+    expect(handler1.callCount).to.equal(1)
 
     el.style.transitionDuration = '500ms'
+    const handler2 = sinon.spy()
+    transitionEnd(el, handler2)
+
+    clock.tick(400)
+    expect(handler2.callCount).to.equal(0)
 
-    expect(parseDuration(el)).to.equal(500)
+    clock.tick(200)
+    expect(handler2.callCount).to.equal(1)
   })
 })