I'm displaying staggered-animations for grid views, and using @vueuse/motion for animating the grid items.
Everything is working, however I just want to optimize and get more precise.
For reasons, I track the animation state of each grid item, using HTML data (e.g. data-animating="true"), such that animated grid items appear like so:
However, on each staggered item, the animation state is set instantly, as opposed to only being set when the actual @vueuse/motion animation begins (preferred). As a test, if delay were set to 5 seconds, the issue is really apparent... grid items are marked as "animating=true" even though no motion is occurring on them yet (until the delay passes)
In the docs, there's an onComplete event mentioned for post-animation logic, which works.
Is there an onStart event, or some other way to detect the actual-start of animation?
transition: {
delay: delay,
// Does something like this exist?
onStart: () => {
el.dataset.animating = true
}
}
I'd rather not have a separate setTimeout wrapping the data change; this seems... wrong.
More complete code:
enter(el, done) {
// Each grid item is delayed in order to create a staggering effect
const index = el.dataset.index || 1
var delay = index * this.duration
// Set a grid item's animating state
// PROBLEM: This occurs instantly, as opposed to when the useMotion animation actually starts
el.dataset.animating = true
useMotion(el, {
initial: {
opacity: 0,
y: 100
},
enter: {
opacity: 1,
y: 0,
transition: {
delay: delay,
// IDEALLY something like this exists.
onStart: () => {
el.dataset.animating = true
},
// All of the below works
onComplete: () => {
el.dataset.animating = false
done() // Informs the Vue TransitionGroup the anim is done it's work
}
}
}
})
}
I'm displaying staggered-animations for grid views, and using
@vueuse/motion
for animating the grid items.Everything is working, however I just want to optimize and get more precise.
For reasons, I track the animation state of each grid item, using HTML data (e.g.
data-animating="true"
), such that animated grid items appear like so:However, on each staggered item, the animation state is set instantly, as opposed to only being set when the actual
@vueuse/motion
animation begins (preferred). As a test, if delay were set to 5 seconds, the issue is really apparent... grid items are marked as "animating=true" even though no motion is occurring on them yet (until the delay passes)In the docs, there's an
onComplete
event mentioned for post-animation logic, which works.Is there an
onStart
event, or some other way to detect the actual-start of animation?I'd rather not have a separate
setTimeout
wrapping the data change; this seems... wrong.More complete code: