<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 1s } </style> </head> <body> <div id="app"> <h3>多个元素/组件动画</h3> <!-- 点击切换的时候动画并不会生效，是因为vue会自动复用dom，添加key属性表示唯一元素就行 --> <!-- transition标签mode属性，mode="out-in"表示动画先出场在进场， mode=‘in-out‘相反 --> <transition mode="out-in"> <h2 v-if="show" key="hello">hello world</h2> <h2 v-else key="bye">bye world</h2> </transition> <button @click="handleClick">切换</button> <h3>组件过渡动画</h3> <transition mode="in-out"> <component :is="type"></component> </transition> </div> </body> <script type="text/javascript"> Vue.component(‘child‘,{ template: `<div>child</div>` }) Vue.component(‘child-one‘,{ template: `<div>child-one</div>` }) let vm = new Vue({ el: ‘#app‘, data: { show: true, type: ‘child‘ }, methods: { handleClick () { this.show = !this.show this.type = this.type=="child"? ‘child-one‘: ‘child‘ } } }) </script> </html>
原文：https://www.cnblogs.com/JunLan/p/12456328.html