vue-transition-move

<!Doctype>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .btn {
            position: fixed;
            bottom: 50px;
            right: 10px;
            z-index: 10;
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            border: none;
            outline: none;
            color: #fff;
            font-size: 18px;
            background: #5dfcff;
        }

        .menu {
            position: fixed;
            bottom: 50px;
            right: 10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            transition: all .7s ease-in;
        }

        .menu.move-enter-active .inner {
            transform: translate3d(0, 0, 0);
            transition-timing-function: cubic-bezier(0, .57, .44, 1.97);
        }

        .menu.move-enter-active .inner-1 {
            transition-delay: .1s;
        }

        .menu.move-enter-active .inner-2 {
            transition-delay: .2s
        }

        .menu.move-enter-active .inner-3 {
            transition-delay: .3s;
        }

        .menu.move-enter .inner,
        .menu.move-leave-active .inner {
            transition-timing-function: ease-in-out
        }

        .menu.move-enter .inner-1,
        .menu.move-leave-active .inner {
            transform: translate3d(0, 60px, 0);
            transition-delay: .3s
        }

        .menu.move-enter .inner-2,
        .menu.move-leave-active .inner-2 {
            transform: translate3d(40px, 40px, 0);
            transition-delay: .2s
        }

        .menu.move-enter .inner-3,
        .menu.move-leave-active .inner-3 {
            transform: translate3d(60px, 0, 0);
            transition-delay: .1s
        }

        .inner {
            display: inline-block;
            position: absolute;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            background: #ff495a;
            text-align: center;
            color: #fff;
            transition: all .4s;
        }

        .inner-1 {
            top: -50px;
            left: 10px;
        }

        .inner-2 {
            left: -30px;
            top: -30px;
        }

        .inner-3 {
            left: -50px;
            top: 10px
        }

    </style>
</head>
<body>
<div id="app">
    <template>
        <button @click="showMenu" class="btn">{{text}}</button>
        <transition name="move">
            <div class="menu" v-show="show">
                <div class="inner inner-1">1</div>
                <div class="inner inner-2">2</div>
                <div class="inner inner-3">3</div>
            </div>
        </transition>
    </template>
</div>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            show: false
        },
        methods: {
            showMenu: function () {
                this.show = !this.show;
            }
        },
        computed: {
            text: function () {
                return this.show ? '收' : '开';
            }
        }
    });
</script>
</body>
</html>

相关阅读:
EF框架下的双表查询
 MVC中控制器向视图传值的四种方式
 html中常用的标签元素
 配置sql server 允许远程连接
 Sql Server中使用存储过程来实现一些时间差的改变
 Linux学习资料整理
 后缀数组求字符串最长重复子串
 static关键字
 ubuntu下搭建hadoop平台
 机器学习中的一些概念
原文地址：https://www.cnblogs.com/theWayToAce/p/7405925.html