preface

The previous article used the Component element to switch components, but it didn’t animate the switch. Then you can refer to the example on the official website to realize the animation of the component switch and the mode effect setting.

Transition of multiple components

Transitioning from multiple components is much easier – we don’t need to use key attributes. Instead, we just need to use dynamic components:

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>
Copy the code
new Vue({
  el: '#transition-components-demo'.data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'}}})Copy the code
.component-fade-enter-active..component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter..component-fade-leave-to
/*.component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
Copy the code

From the above example on the official website, write the animation effect example of this component switch, mainly by the following steps to write up, if you simply look at a final written example, it may not be clear inside the truth.

The steps are as follows:

  • Written usingcomponentSwitch the function of the component to complete the basic switching effect
  • usetransitionincludingcomponentComponent and name itnameforcomponent-fade
  • incssIn the writingcomponent-fadeThe animation effect of entrance and entrance
  • Finally, add the mode of animationmode

Let me write another example to demonstrate this step by step.

The sample

1. Writing and usingcomponentSwitch the function of the component to complete the basic switching effect

<! DOCTYPE html> <html lang="en">
    <head>
        <meta charset="UTF-8"> <title>Title</title> <! -- Import vue. Js library --> <script SRC ="lib/vue.js"></script>

    </head>
    <body>

        <div id="app1">

            <a href="" @click.prevent=" view='login' "</a> <a href="" @click.prevent=" view='register' "> Register </a> <! -- Set component switching with Component --> <component :is="view"></component> </div> <script>'login',{
                template:'
 Login component 
'
            })

            // 创建注册组件
            Vue.component('register',{
                template:'
 Registered Component 
'Var vm1 = new Vue({el:'#app1',
                data: {
                    view: ""},}) </script> </body> </ HTML >Copy the code

The following information is displayed:

  • Click the login button

  • Click the register button

You can see that the component switch has been implemented above.

2. UsetransitionincludingcomponentComponent and name itnameforcomponent-fade

In 3.cssIn the writingcomponent-fadeThe animation effect of entrance and entrance

Now open the browser to view the animation effect as follows:

The switch between the two components results in an uneven transition because the position is occupied up and down. The registration component below will not move until the Login component disappears to the right.

If you want to smooth two content changes from left to right, you can set mode to do this.

4. Add animation modemode

In the mode setting, you can set out-in and in-out. Here I set out-in first to check the effect as follows:

After setting mode to out-of-in, the component will wait for the login component to disappear before performing the login component animation when switching.

So what if I set in-out?

If in-out is used, the new component is entered first and the old component is removed later, which is not smooth. So it’s usually set to out-of-in.

For more original Devops articles, check out my Devops community: