[Vuejs]-How to custom transition for each component?

by

0👍

✅

Edit 2:

Here a working example with the componentA and componentB that are sliding over the mainComponent -> https://jsfiddle.net/5aq1k05L/8/

I changed the transition to mode:in-out, I added a z-index for each component, and put the components in position:absolute and the app in position:relative

Edit:

Here a working example for your case -> https://jsfiddle.net/5aq1k05L/4/

When you analyse the script step by step, you see that the class when the componentB is leaving is step_mainComponent-leave-active step_mainComponent-leave-to that it makes a classic toggle relative to the mainComponent style.

If you want to use different animations, you should use enter-active-class and leave-active-class etc (see more here) – or put two vars in name, i guess, with a dynamic value relative to the previous view, in the store like currentView is.

It could be like this :

<transition
    :name="'step_' + currentView + '_from_' + prevView" 
    mode="out-in"
  >

In the store (you ll need to update the states, mapState, etc.. as well too) :

SET_CURRENT_VIEW(state, new_currentView) {
  state.prevView = state.currentView;
  state.currentView = new_currentView;
}

Hope it ll help you

👤pirs

Leave a comment