40. Vue组件切换动画以及mode效果设置

Devops海洋的渔夫

修改于 2020-07-06 09:42:50

2K0

修改于 2020-07-06 09:42:50

文章被收录于专栏：Devops专栏Devops专栏

前言

上一篇使用component元素实现组件切换，但是没有切换的动画效果。那么可以参考官网的例子，实现一下组件切换的动画，以及mode效果设置。

官网说明：多个组件的过渡

多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反，我们只需要使用动态组件：

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

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>'
    }
  }
})

.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;
}

从上面官网的例子中，写这个组件切换的动画效果例子，主要由以下几个步骤写起来，如果单纯这样看一个最终写完的示例，可能不太清楚里面的道理。

步骤如下：

编写使用component切换组件的功能，完成基本的切换效果
使用transition包括component组件，并命名name为component-fade
在css中编写component-fade入场、出场的动画效果
最后，加上动画的模式mode

下面，我再写一个示例，一步步来演示看看。

示例

1.编写使用`component`切换组件的功能，完成基本的切换效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--  导入vue.js库  -->
        <script src="lib/vue.js"></script>

    </head>
    <body>

        <div id="app1">

            <a href="" @click.prevent=" view='login' ">登陆</a>
            <a href="" @click.prevent=" view='register' ">注册</a>

            <!-- 使用component设置组件切换 -->
            <component :is="view"></component>

        </div>

        <script>        
            // 创建登陆组件
            Vue.component('login',{
                template:'<h1>登陆组件</h1>'
            })

            // 创建注册组件
            Vue.component('register',{
                template:'<h1>注册组件</h1>'
            })

            // 创建第一个Vue的实例
            var vm1 = new Vue({
                el: '#app1',
                data: {
                    view: "", // 设置切换组件的注册名称
                },
            })

        </script>

    </body>
</html>

浏览器显示如下：