-
mode是<transition>组件的属性值，其值有out-in和in-out,作用效果为一个组件的彻底移除后，另外一个组件才会进来 -
图下图所示
20200526_164301.gif
- 测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.c-enter,.c-leave-to {
transform:translateX(50px);
opacity:0;
}
.c-enter-active,.c-leave-active{
transition: all .6s ease;
}
</style>
<body>
<div id="app">
<a href="" @click.prevent = "comName = 'myView'" >组件1</a>
<a href="" @click.prevent = "comName = 'myAction'">组件2</a>
<transition name="c" mode="out-in">
<component :is="comName"></component>
</transition>
</div>
<template id='tmp'>
<p>
{{msg}}
</p>
</template>
<template id='tmp1'>
<p>
{{msg}}
</p>
</template>
<script type="text/javascript">
Vue.component("myView",{
template:"#tmp",
data:function() {
return {msg:'组件1'}
}
});
Vue.component("myAction",{
template:'#tmp1',
data:function() {
return {msg:'组件2'}
}
})
Vue.component("view1",{
template:"<h1>测试组件</h1>",
});
const vm = new Vue({
el:'#app',
data:{
comName:'myView'
},
methods:{
}
})
</script>
</body>
</html>
网友评论