5-5Vue中多个元素或组件的过渡 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中多个元素或组件的过渡</title> <script src="vue.js"></script>  <style> .v-enter, v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 500ms; } </style> </head> <body> <div id="root"> <transition mode="out-in">      <component :is="type"></component>  </transition> <button @click="handleClick">toggle</button> </div> <script> Vue.component('child-one', { template: '<div>child-one</div>' }) Vue.component('child-two', { template: '<div>child-two</div>' }) var vm = new Vue({ el: '#root', data: { show: true, type: 'child-one' }, methods: { handleClick() { this.show = !this.show this.type = this.type == 'child-one' ? 'child-two' : 'child-one'; } } }) </script> </body> </html> ~~~