search

Zulko / eagle.js

A hackable slideshow framework built with Vue.js
https://zulko.github.io/eaglejs-demo/
ISC License
4.08k stars 223 forks source link

support transition speed #71

Closed killua99 closed 5 years ago

killua99 commented 5 years ago

I would like to know how could be the best option to alter the speed between enter and leave. I'm new into vuejs and I'm trying my best to understand the transition between components

Zulko commented 5 years ago

If you are using the classical transitions from Aminate.css (such as zoomIn, slideOut, etc.) then have a look at the Animate.css README:

https://github.com/daneden/animate.css

It seems that Animate.css now supports speed and delay tuning. I haven't tried it, but theoretically all you need to do is to provide zoomIn fast or zoomOut slow as transitions.

To undestand transitions: When you set a leave transition to for instance zoomOut, Vue will set the component's CSS class to .zoomOut every time the component is supposed to disappear. The CSS class has a specific CSS animation (defined in the CSS) such as this one. So theoretically, you could define your own animation .my-transition in your CC then use my-transition in Vue/Eagle slideshows.

killua99 commented 5 years ago

It was that simple, thanks for the quick response I was confusing where I should solve or alter it, with CSS is just the best way to play with it, I create my on CSS class and use the speed I wanted.

Zulko commented 5 years ago

All good then !

yaodingyd commented 5 years ago

I guess We can use option to global set delay and speed

Zulko commented 5 years ago

Imho zoomIn slow is simple enough to avoid extending the Eagle API. And it only works for animatecss transitions.