<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中多个元素或组件的过渡</title> <script src="./vue.js"></script> <style> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 1s; } </style> </head> <body> <div id="root"> <transition name="fade" mode="in-out"> <component :is="type"></component> </transition> <button @click="handleClick">toggle</button> </div> <script> Vue.component('child',{ template:'<div>child</div>' }); Vue.component('child-one',{ template:'<div>child-one</div>' }); var vm = new Vue({ el:"#root", data:{ type:'child' }, methods: { handleClick: function () { this.type = this.type ==='child' ? 'child-one' : 'child' } } }) </script> </body> </html>
vue中多个元素或组件的过渡
猜你喜欢
转载自blog.csdn.net/qq_19168521/article/details/80944235
今日推荐
周排行