<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>多组件的过渡</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* 过渡样式fade-enter-active进入 ; fade-leave-active离开*/
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
/* fade-enter进入 fade-leave-to离开 */
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="chageCom('coma')" >标签1</button>
<button @click="chageCom('comb')" >标签1</button>
<transition name="fade" mode="out-in">
<component :is="currentCom"></component>
</transition>
</div>
</body>
</html>
<script type="text/javascript">
var coma = {
template:`<p>我是A</p>`,
};
var comb = {
template:`<p>我是B</p>`,
};
var vm = new Vue({
el:'#app',
data:{
currentCom:'coma',
},
components:{
'coma':coma,
'comb':comb
},
methods:{
chageCom:function(com){
this.currentCom=com
}
}
});
</script>
多组件的过渡--各种炫酷动画效果
最新推荐文章于 2024-03-31 20:19:15 发布