vue-transition-move

Posted Newbie_小白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

以上是关于vue-transition-move的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数