<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中多个元素或组件的过渡</title>
<script src="vue.js"></script>
<script src="velocity.js"></script>
<style type="text/css">
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: opacity 0.5s;
}
</style>
</head>
<body>
<div id="app">
<!--3：使用动画效果进行两个组件的切换-->
<transition mode="out-in">
<!--2：通过type来判断显示哪一个组件-->
<comment :is="type"></comment>
</transition>
<button type="button" @click="handleBtn">出现/隐藏</button>
</div>
<script>
/*1:定义两个组件*/
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm=new Vue({
el:'#app',
data:{
type:'child'
},
methods:{
handleBtn:function(){
this.type=this.type==='child'?'child-one':'child'
}
}
})
</script>
</body>
</html>
投递美的集团等公司10个岗位 >
