Permalink
Browse files

fix staggering when resolving a css selector

  • Loading branch information...
notoriousb1t committed Sep 15, 2017
1 parent ae1c40c commit 90f4367e181c4873c0420f2ed31cd66457bbe39d
Showing with 57 additions and 4 deletions.
  1. +1 −0 .npmignore
  2. +2 −2 src/lib/model/effects.ts
  3. +7 −2 src/lib/model/update.ts
  4. +17 −0 tests/lib/staggering.ts
  5. +30 −0 tests/web/staggering.ts
View
@@ -1,5 +1,6 @@
node_modules
tests
src
.alm
.vscode
.editorconfig
View
@@ -91,8 +91,8 @@ function toEffects(config: TargetConfiguration): Effect[] {
plugin: propToPlugin[prop],
target,
prop,
from: from + (stagger ? (stagger + 1) * index : 0),
to: to + (stagger ? (stagger + 1) * index : 0),
from: from + (stagger ? stagger * index : 0),
to: to + (stagger ? stagger * index : 0),
keyframes: effects2
})
}
View
@@ -13,7 +13,7 @@ import {
RATE,
PLAY
} from '../utils/constants'
import { inRange, minMax, flr } from '../utils/math'
import { inRange, minMax, flr, max } from '../utils/math'
import { publish } from '../dispatcher'
import { PlayOptions, ITimelineModel, AnimationPlayer } from '../types'
import { all, push } from '../utils/lists'
@@ -224,7 +224,12 @@ function setupEffects(model: ITimelineModel) {
controller.to = effect.to
push(animations, controller)
}
})
})
// change duration to max to
model.duration = max.apply(_, animations
.filter(a => isFinite(a.to))
.map(a => a.to))
model.players = animations
updateTime(model.id, _)
View
@@ -67,4 +67,21 @@ describe('staggering', () => {
}
])
})
it('increases the duration to fit staggered targets when active', () => {
const targets = [{}, {}, {}, {}]
const t1 = animate({
targets: targets,
duration: 1000,
easing: 'linear',
stagger: 100,
props: {
opacity: [0, 1]
}
})
t1.pause()
assert.deepEqual(t1.duration, 1400)
})
})
View
@@ -0,0 +1,30 @@
import { animate, addPlugin, removePlugin } from '../../src/main'
import * as chai from 'chai'
import { waapiPlugin } from '../../src/web/index'
const { assert } = chai
describe('staggering', () => {
before(() => addPlugin(waapiPlugin))
after(() => removePlugin(waapiPlugin))
it('increases the duration to fit staggered targets when active', () => {
const root = document.createElement('div')
root.innerHTML = `<i class="one"></i><i class="one"></i><i class="one"></i><i class="one"></i><i class="one"></i>`
document.body.appendChild(root)
const t1 = animate({
targets: 'i.one',
duration: 1000,
easing: 'linear',
stagger: 100,
web: {
opacity: [0, 1]
}
})
t1.pause()
assert.deepEqual(t1.duration, 1500)
document.body.removeChild(root)
})
})

0 comments on commit 90f4367

Please sign in to comment.