Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.

Animations for tabs on change? #56

Closed
chrisbbreuer opened this issue Oct 13, 2017 · 3 comments
Closed

Animations for tabs on change? #56

chrisbbreuer opened this issue Oct 13, 2017 · 3 comments

Comments

@chrisbbreuer
Copy link

Last but not least, I do have one more question. Haha

Has anyone tried to accomplish tab animations? Just simple fade in and out animations of the actual .wizard-tab-content ?

I think those would look great! :-)

@cristijora
Copy link
Collaborator

Hey @Chinese1904 This unfortunately is not possible now unless you use vue-router
https://jsfiddle.net/bt5dhqtf/267/

I started working on an upgraded version (more internally) which will allow transitions for the content

@cristijora
Copy link
Collaborator

cristijora commented Nov 13, 2017

Hi again @Chinese1904

Coming with an update here.
You could use simple css animations on tab-containers
Here is an example with animate.css

https://jsfiddle.net/bt5dhqtf/1478/

.wizard-tab-content {
  .wizard-tab-container {
    display: block;
    animation: fadeInRight 0.3s;
  }
}

@cristijora
Copy link
Collaborator

@Chinese1904 unfortunately due to some rendering limitations, it won't be possible to have explicit transitions. I have tried several options but without much success. I think we will have to stick to the solution from above with css.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants