Vue组件切换动画

Vue组件切换动画教程

在 Vue 中，要实现 组件切换动画 效果，只需要将要切换的组件使用 transition 包裹即可。

Vue组件切换动画详解

语法

<transition mode="mode">
          <component :is="comName"></component>
</transition>

案列

Vue组件切换动画使用

<!DOCTYPE html>
<html>
<head>
	<title>Vue组件切换动画</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
    <style type="text/css">
        .v-enter,
        .v-leave.to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
	<div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <!-- 通过mode属性，设置组件切换模式 -->
      <transition mode="out-in">
          <component :is="comName"></component>
      </transition>
      <p>嗨客网（www.haicoder.net）</p>
    </div>
</body>
<script type="text/javascript">
	Vue.component("login", {
		template:"<h2>登录组件-组件切换动画</h2>"
	});
    Vue.component("register", {
        template:"<h2>注册组件-组件切换动画</h2>"
    });
	var vm = new Vue({
        el : '#app',
        data:{
            comName:'login'
        }
    });
</script>
</html>

浏览器运行效果，如下图所示：

13 vue component change.png

我们使用 transition 将要切换的组件进行了包裹，并且设置动画切换的模式为 out-in。

Vue组件切换动画总结

在 Vue 中，要实现组件切换动画效果，只需要将要切换的组件使用 transition 包裹即可。