Skip to content

Commit

Permalink
feat: Support padding in transitionEnd (#96)
Browse files Browse the repository at this point in the history
* feat: Support padding in transitionEnd

* fix tests
  • Loading branch information
taion authored Apr 2, 2020
1 parent b37aa27 commit 7b2f626
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 15 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 6 additions & 10 deletions src/transitionEnd.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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
31 changes: 27 additions & 4 deletions test/transition.js
Original file line number Diff line number Diff line change
@@ -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)
})
})

0 comments on commit 7b2f626

Please sign in to comment.