一、组件切换动画
多个组件的动画过渡，只需要用transition包裹（动态组件），不需要使用key特性。
<transition></transition>元素有一个mode属性，用于设置动画过渡效果。
- 默认是同时进行元素的进入和离开。元素绝对定位
position: absolute;不会有错位问题。 - in-out，新元素先进行过渡进入，完成之后当前元素过渡离开。
- out-in，当前元素先过渡离开，完成之后新元素过渡进入。
注意：此过渡模式是建立在多组件切换的基础上的，也就是动态组件切换。
二、实例
实现组件之间平滑过渡切换，先原来组件消失后再新组件进入。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,.v-leave-active{
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id='app'>
<a href="" @click.prevent="templName='sign'">登陆</a>
<a href="" @click.prevent="templName='register'">注册</a>
<transition mode="out-in">
<component :is="templName"></component>
</transition>
</div>
<template id="templ1">
<h2>登陆组件页面</h2>
</template>
<template id="templ2">
<h2>注册组件页面</h2>
</template>
<script>
Vue.component('sign', {
template: '#templ1',
});
Vue.component('register', {
template: '#templ2',
});
var vm = new Vue({
el: "#app",
data: {
templName: 'sign'
}
});
</script>
</body>
</html>
三、非组件切换使用mode属性
如果是直接在<transition></transition>中写入两个元素，不同属性可以不用管；如果是同种标签，需要给每个元素加key以区分元素，否则Vue机制会为了性能使用同一个元素，不跟换整个元素而是只改变值。
如果是单独的两个标签之间切换，同元素需要设置key(经测试同为input元素，但只要类型type不同，如button和text，也认为是不同元素)。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,.v-leave-active{
transition: all 0.5s ease;
}
h1{
position: absolute;
}
</style>
</head>
<body>
<div id='app'>
<transition mode="out-in">
<input type="button" value="on" @click="flg=!flg" v-if="flg" key="btn1">
<input type="button" value="off" @click="flg=!flg" v-else="flg" key="btn2">
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flg:true
},
});
</script>
</body>
</html>
网友评论