How to custom transition for each component?

Question

I have 3 components which I want to show a transition effect when they enter/leave.

There's 1 "main" component and the 2 others show up when you press the associated button. My current sample code is here: https://jsfiddle.net/5aq1k05L/

<transition :name="'step_' + currentView" mode="out-in">
  <component :is="currentView"></component>
</transition>

CSS:

.step_componentA-enter-active {
  transition: transform 0.4s;
}

.step_componentA-leave-active {
  transition: transform 0s;
}

.step_componentA-enter {
  transform: translateX(-100%);
}

.step_mainComponent-leave-active {
  transition: transform 0.3s;
}

.step_mainComponent-leave-to {
  transform: translateX(-100%);
}

.step_componentB-enter-active {
  transition: transform 0.4s;
}

.step_componentB-leave-active {
  transition: transform 0s;
}

.step_componentB-enter {
  transform: translateX(100%);
}

What I am trying to do:

When I click on the "componentA" button, I want that component to slide from the left while "mainComponent" is still visible in the background (not stripped out of elements like now) during the transition.

Same thing for "componentB", except it will slide from the right, and will back to the right when clicking back.

What am I missing? https://jsfiddle.net/5aq1k05L/

@tony19 Indeed. I've updated the post. Thanks! – Cornwell Jan 25 '18 at 22:06 — Cornwell, Jan 25 '18 at 22:06

score 0 · Accepted Answer · edited Jul 16 '22 at 03:21

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

edited Jul 16 '22 at 03:21

tony19

125,647
18
229
307

answered Jan 25 '18 at 23:15

pirs

2,410
2
18
25

Thanks for the reply, but I'm not sure if I understood. I guess I can see how that would help with the sliding from different direction, but how about the previous component "losing" its elements before being removed? – Cornwell Jan 26 '18 at 14:11
The concept would be to make the `:leave-active-class` different for each prev component because in your case, the `step_mainComponent` is the "idle" class that makes the toggle effect, i mean `transform: translateX(-100%);` translate at the left side only, not the right one. What didnt you understand precisely ? – pirs Jan 26 '18 at 14:23
I think understand the concept and added the previousView state, but I still don't get it to show a different animation when triggering from componentB and componentA plus keeping the background – Cornwell Jan 31 '18 at 11:14
@Cornwell, i did it as well, see the example – pirs Jan 31 '18 at 17:22
@Cornwell did you see the example ? Its working as you want :-) – pirs Feb 04 '18 at 11:42
Thanks! Sorry for the late reply, I missed the notification somehow. I still seem to be unable to get part of it working: Where the main component should not "disappear" before the other one slides in. Meaning: I should see the main component in the background while the new component slides in, instead of just a gray background like now. I tried messing with the opacity but no luck – Cornwell Feb 06 '18 at 08:29
@Cornwell Ok, see the **Edit 2**, i think it's what you want. Don't forget to accept or add a point ;-) – pirs Feb 06 '18 at 09:40

How to custom transition for each component?

1 Answers1