Vue基础实例三（动画）

作者: IT飞牛 | 来源:发表于2019-04-02 21:13 被阅读0次

Vue基础实例三（动画）
Vue
Vue快速入门(二)《快乐Vue》
Vue学习总结（2019.7.31-8.4）
vue路由动画
vue知识点列表
vue基础
vue语法大纲
Vue中的动画
Vue2学习笔记：vue实例

本人生活在一个3线小城市，本地的企业在考虑mvvm框架的时候，几乎都选择了Vue，灵活、生态齐全、学习成本低、配套文档和相关教程丰富等等一系列的优势，使得Vue这个框架在国内异常火爆。而且最近出了uni-app，号称一套代码可以编译出多套代码，大大的减轻开发工作量。所以，我也随大流，踏入Vue。

本系列实例都是简单的Vue功能演示，纯属个人学习记录用，大神请绕行。

隐藏到显示
在点击一瞬间，给标签添加classfade-enter、fade-enter-active；然后再加上classfade-enter-to,去除classfade-enter，保留classfade-enter-active；然后所有class都可以自定义。

image.png

显示到隐藏
原理同上；

image.png

基于之前动态组件的例子，添加<transition name="fade">动态组件</transition>包裹在需要添加动画的组件外。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello world</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        .style1 {
            line-height: 150%
        }

        .fade-enter {
            opacity: 0;
        }

        .fade-enter-to {
            opacity: 1;
        }

        .fade-enter-active {
            transition: opacity 1s;
        }

        .fade-leave {
            opacity: 1;
        }

        .fade-leave-to {
            opacity: 0;
        }

        .fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>

<body>
    <div id="app" class="style1">
        <transition name="fade">
            <component :is="type"></component>
        </transition>

        <button @click="toggle">点击</button>
    </div>
</body>

</html>
<script>
    var childone = {
        template: `<div>child-one</div>`,
    };
    var childtwo = {
        template: `<div>child-two</div>`,
    };
    var app = new Vue({
        el: "#app",
        components: {
            "child-one": childone,
            "child-two": childtwo,
        },
        data: {
            type: "child-one"
        },
        methods: {
            toggle: function () {
                this.type = this.type == "child-one" ? "child-two" : "child-one";
            }
        }
    })
</script>