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.后记
代码比较多 ,注释 解释不多 .没有太多的逻辑
自己看 自己练,玩,自己体会
