CODEWITHSUNDEEP
javascriptcssvue.js
kaito.higa
kaito.higa

Reputation: 13

How do you realize the "in-out mode" transition effect when using dynamic route matching in Vue.js?

Is it possible to make the transition effect operate in "in-out mode" by dynamic route matching of Vue.js? I would like to have a professor if possible.
When I had this trouble, I was able to find very useful questions and answers.

Vue.js 2.0 transition on dynamic route not firing

<transition name="fade" mode="out-in">
  <div class="page-contents" :key="$route.params.id">
    This is my chapter component. Page: {{parseInt($route.params.id)}}
  </div>
</transition>

As shown in the answer, we were able to successfully fire the transition effect by specifying the key for the transition target.
However, I would like to be able to realize with mode = "in-out" instead of mode = "out-in".

I would like to be able to superimpose Vue components like the official guide.

Vue.js Transition Modes

Simultaneous entering and leaving transitions aren’t always desirable though, so Vue offers some alternative transition modes:
in-out: New element transitions in first, then when complete, the current element transitions out.
out-in: Current element transitions out first, then when complete, the new element transitions in.

Is it impossible to display one Vue component (instance) at the same time on the screen at the same time? We are waiting for your answer.

Upvotes: 1

Views: 1145

Answers (1)

Saurabh
Saurabh

Reputation: 73669

You can definitely use in-out with router-view, Here is the modified fiddle from the question you have added : https://jsfiddle.net/dLnz4rbL/3/

I have change the transition to slide-fade with below CSS:

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  transform: translateX(500px);
  opacity: 0;
}

Upvotes: 1

Related Questions