vue 动态组件动画-转场动画基础

1.前言

这个先不用单文件组件来演示
因为单文件组件 一般都是项目使用了,项目中一般都是路由动画

---

2.动态组件动画

html

        男装
        
        女装
        
        

        
            
                
            

        

    

---

3. js

   var com1 = {
        template: `
        

            
男装
            
 假装 你喜欢的男神风格的衣服
        
        `,
        mounted() {
            console.log("com1渲染完毕")
        },
        destroyed() {
            console.log("com1已被销毁")
        }
    };

    var com2 = {
        template: `
        

            
女装
            
假装有很多 图片列表哈哈
        
        `,
        mounted() {
            console.log("com2渲染完毕")
        },
        destroyed() {
            console.log("com2已被销毁")
        }
    }

    var app = new Vue({
        el: "#my-app",
        components: {
            com1,
            com2
        },
        data: {
            type: "com1"
        }
    });

---

4. 样式

---

5. 转场动画-html

transition的name属性可以是固定值，
也可以动态绑定一个变量，这样就可以通过修改变量实现在不同场景下执行不同的动画

  

        

            组件1
            
            组件2
            
        

        
            
                
            
        
    

---

6.转场动画-js

    Vue.component("com1",{
        template:`

            组件1
            
        
`
    })

    Vue.component("com2",{
        template:`
组件2
`
    })

    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.后记

代码比较多 ,注释 解释不多 .没有太多的逻辑
自己看 自己练,玩,自己体会

---

参考资料

vue-动画

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉