search

stijlbreuk-dev / vue-split-grid

Vue component based on Split Grid
MIT License
18 stars 2 forks source link

Animation events #12

Open rebinnaf opened 4 years ago

rebinnaf commented 4 years ago

Is there any way to understand when does the animation end or starts? I need animationend event.

nino-vrijman commented 4 years ago

Hi @rebinnaf 👋,

Right now there's no such event unfortunately. A workaround for now could be to use a setTimeout and wait for the animation duration that you specified yourself in either the transition or animation option of your SplitGrid, SplitGridArea or SplitGridGutter component when you trigger the transition/animation.

How do you propose the API would look like if we were to implement an 'on animation end' and maybe event?

rebinnaf commented 4 years ago

Hi @nino-vrijman

Thanks, I did it, but I think it is not accurate in some cases. I made a sandbox to show it, I think page loading and performance can affect it. I just have added many images and log the element height to see it is fine. https://codesandbox.io/s/vue-split-grid-basic-example-forked-223l9?file=/src/App.vue Screen Shot 2020-10-08 at 5 44 03 PM

For the API, I am not sure if we can define multiple animation actions for a spit-grid, if not it would be great to emit the event like this:

<SplitGrid class="sb_split-grid" v-bind="splitGridOptions" :animation="animation" direction="row" @splitAnimationEnd="sampleFunc" @splitAnimationstart="sampleFunc"

It would also be great to add animationiteration and animationcancel events.