1.前言
这个先不用单文件组件来演示
因为单文件组件 一般都是项目使用了,项目中一般都是路由动画
2.动态组件动画
html
<div id="my-app">
<label for="">男装</label>
<input type="radio" value="com1" v-model="type">
<label for="">女装</label>
<input type="radio" value="com2" v-model="type">
<hr>
<transition name="yzs">
<keep-alive>
<component :is="type"></component>
</keep-alive>
</transition>
</div>
3. js
var com1 = {
template: `
<div class="sub-root1">
<h1>男装</h1>
<p> 假装 你喜欢的男神风格的衣服</p>
</div>
`,
mounted() {
console.log("com1渲染完毕")
},
destroyed() {
console.log("com1已被销毁")
}
};
var com2 = {
template: `
<div class="sub-root2">
<h1>女装</h1>
<p>假装有很多 图片列表哈哈</p>
</div>
`,
mounted() {
console.log("com2渲染完毕")
},
destroyed() {
console.log("com2已被销毁")
}
}
var app = new Vue({
el: "#my-app",
components: {
com1,
com2
},
data: {
type: "com1"
}
});
4. 样式
<style>
.sub-root1{
background-color: skyblue;
height:500px;
width: 100%;
}
.sub-root2{
background-color: greenyellow;
height:500px;
width: 100%;
}
.yzs-enter-active,
.yzs-leave-active {
/* 为了保证组件切换动画时，两个组件重叠显示，在动画持续时间将做动画的组件根元素设置为绝对行为 */
position: absolute;
transition: all 2s;
}
.yzs-leave-to ,.yzs-enter{
opacity: 0;
}
.yzs-enter-to,.yzs-leave {
opacity: 1;
}
</style>
5. 转场动画-html
transition的name属性可以是固定值，
也可以动态绑定一个变量，这样就可以通过修改变量实现在不同场景下执行不同的动画
<div id="my-app">
<nav>
<label for="">组件1</label>
<input type="radio" v-model="type" value="com1">
<label for="">组件2</label>
<input type="radio" v-model="type" value="com2">
</nav>
<transition :name="aniType">
<keep-alive>
<component :is="type"></component>
</keep-alive>
</transition>
</div>
6.转场动画-js
Vue.component("com1",{
template:`<div class="sub-root1">
组件1
<input>
</div>`
})
Vue.component("com2",{
template:`<div class="sub-root2">组件2</div>`
})
var app = new Vue({
el:"#my-app",
data:{
type:"com1",
aniType:"slide-left"
},
watch:{
// 监听type的变化，判断是要切换到哪个组件，从而改变aniType的类型，执行不同的动画。
type:function(v){
if(v=="com2"){
this.aniType = "slide-left"
}else{
this.aniType = "slide-right";
}
}
}
})
7. 转场动画-style
body{
margin: 0;
}
nav{
border: solid 1px black;
height: 40px;
}
.sub-root1,.sub-root2{
border: solid 1px red;
height: 300px;
width: 100%;
box-sizing: border-box;
}
.sub-root1{
background-color: skyblue;
}
.sub-root2{
background-color: greenyellow;
}
/* 左侧离场，右侧入场 动画 */
.slide-left-leave{
transform: translate(0,0);
}
.slide-left-leave-active,.slide-left-enter-active{
transition: all 0.7s;
/* 为了保证组件切换动画时，两个组件重叠显示，在动画持续时间将做动画的组件根元素设置为绝对行为 */
position: absolute;
}
.slide-left-leave-to{
transform: translate(-100%,0);
}
.slide-left-enter{
transform: translate(100%,0);
}
.slide-left-enter-to{
transform: translate(0,0);
}
/* 右侧离场，左侧入场 动画 */
.slide-right-leave{
transform: translate(0,0);
}
.slide-right-leave-active,.slide-right-enter-active{
transition: all 0.7s;
position: absolute;
}
.slide-right-leave-to{
transform: translate(100%,0);
}
.slide-right-enter{
transform: translate(-100%,0);
}
.slide-right-enter-to{
transform: translate(0,0);
}
body{
overflow-x: hidden;
}
抛砖引玉 更多奇思妙想的 动画等你玩 , 玩去吧
8.后记
代码比较多 ,注释 解释不多 .没有太多的逻辑
自己看 自己练,玩,自己体会
