首先，作为一个大条性格的人，写动画太难受，在做这个效果的时候磨了好久，终于磨出来啦！ 首先先要熟悉过度动画动画的整体流程 .v-enter{ 初始进入过渡时的状态 } .v-enter-to{ 进入过渡后的状态 } .v-leave{ 初始离开过渡的状态 } .v-leave-to { 离开过渡后的状态 } .v-enter-active{ 定义进入过渡的过程 } .v-leave-active { 定义离开过渡的过程 } 上面的定义是没有疑问的
那么在切换组件时，过渡动画保持一种不变还好，如果是多种的话就不好调节啦 例如
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>主页</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* table{ border-collapse: collapse; } */ body { background: #f0f0f0; width: 100vw; overflow: hidden; } footer { width: 100vw; position: fixed; bottom: 0; display: flex; justify-content: space-around; background: white; border: solid 1px #ededed; box-shadow: 0 0 10px #999; padding: 2vw 0; } footer .item { cursor: pointer; } footer .item img { display: block; } #index { height: 100vh; background: rgb(231, 147, 147); } #search { height: 100vh; background: rgb(111, 240, 229); } .index-enter{ transform: translateX(-100%); } .index-leave-to { transform: translateX(-100%); } .index-enter-active, .index-leave-active { transition: all 1s; } .search-enter{ transform: translateX(100%); } .search-enter-to{ transform: translateX(0); } .search-leave{ transform: translateX(0); } .search-leave-to { transform: translateX(100%); } .search-enter-active, .search-leave-active { transition: all 1s; } .next{ position: absolute; width: 100vw; left:0; } </style> </head> <body> <div id="app"> <transition :name="name"> <keep-alive> <component :is="type" class="next" :key="type"> </component> </keep-alive> </transition> <footer> <tab v-for="tab,idx in fotbar" :key="idx" v-model="isActive" :tabs="tab.name" :list="tab.tag" @typechange="tChange" @nchange="achange"> <img :src="isActive == tab.name ? tab.isActive_path : tab.url_path " alt="" slot="img"> <span :style="isActive == tab.name ? styleObj : '' " slot="text">{{tab.name}}</span> </tab> </footer> </div> <script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/vue.js"></script> <script type="html/x-template" id="tabbar"> <div class="item" @click="active"> <slot name="img"></slot> <slot name="text"></slot> </div> </script> <script type="htm/x-template" id="index"> <transition name="index"> <div id="index"> <h1>首页</h1> </div> </transition> </script> <script type="htm/x-template" id="search"> <transition name="search"> <div id="search"> <h1>发现</h1> </div> </transition> </script> <script type="htm/x-template" id="check"> <h1>订单</h1> </script> <script type="htm/x-template" id="mine"> <h1>我的</h1> </script> <script> Vue.component('index', { template: '#index', data() { return { } } }) Vue.component('search', { template: '#search', data() { return { } } }) Vue.component('check', { template: '#check', data() { return { } } }) Vue.component('mine', { template: '#mine', data() { return { } } }) Vue.component('tab', { template: '#tabbar', data() { return { } }, props: ['value', 'tabs', 'list'], methods: { active() { this.$emit('input', this.tabs); // console.log(this.list); this.$emit('typechange', this.list) this.$emit('nchange', this.list) } } }) new Vue({ el: '#app', data: { fotbar: [ { name: '首页', url_path: './img/icon/饿了么.png', isActive_path: './img/icon/饿了么(1).png', tag: 'index' }, { name: '发现', url_path: './img/icon/指南针.png', isActive_path: './img/icon/指南针(1).png', tag: 'search' }, { name: '订单', url_path: './img/icon/订单.png', isActive_path: './img/icon/订单(1).png', tag: 'check' }, { name: '我的', url_path: './img/icon/我的.png', isActive_path: './img/icon/我的(1).png', tag: 'mine' } ], isActive: '首页', styleObj: { 'color': 'blue' }, type: 'index', name: 'index' }, mounted() { }, methods: { tChange(v) { this.type = v; // console.log(v) }, achange(v) { this.name = v; } } }) </script> </body> </html>在上面的代码块中，写了一个tabbar组件，后来想要添加一个切换的效果，所以就利用tabbar做了一个小实验。 效果描述; 当点击发现的时候，首页组件从右向左移动做出场动画，而发现组件从右向左做入场动画，当点击首页的时候，发现组件从左向右做出场动画，而首页组件从左向右做入场动画， 可以发现它们两个组件的动画是反着来的，它们的初始进入过渡状态和进入过渡后的状态，以及初始离开过渡的状态和离开过渡后的状态都是不一样的 后来就在他们的模板上分别加了transition设置不同的name名称，实现不同的动画名称； 后来又出现了一个页面执行完出场动画后，另一个页面直接显现并没有执行入场动画,后来加了一个class类名设置它的css样式
.next{ position: absolute; width: 100vw; /* left:0; */ }