vue2.0 transition -- demo 实践填坑

今天是日更的第49天，对待文章的态度真是一天不如一天，为了日更开始滥竽充数。
这篇文章的原貌是直接从这里www.cnblogs.com 全部Copy了一下，而且连文章都没去看，实在罪过。
但在发布更新文章后，去看了下这篇文章，又关联起来这几天正在看的Vue2.0开发企业级移动音乐APP教程，这个过渡效果的使用真的是十分的广泛且易用，于是良心发现，回来文章删掉重写。

Vue的动画效果真是哇咔咔的棒，demo实践前先去官网对过渡效果进行一个微小的复习。
官网快捷地址：https://cn.vuejs.org/v2/guide/transitions.html
由于内容较多，可回头再看，下面进入一个小小的demo实现。

实现效果：

demo.gif

题外话：【关于上图的gif制作，我之前一直想做，但是没找到一个好的制作gif的软件，今天又上网查了一下，Mac版新版扣扣有这个功能，使用起来真是大大的方面，将屏幕录屏转换为gif动态图，使用教程快捷地址：戳这里】

然后直接vue init webpack 了一个新项目，在新项目的HelloWorld.vue文件中修改代码如下：

<template>
    <div class="app">
        <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>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'HelloWorld',
        data () {
            return {
                show: false
            };
        },
        methods: {
            showMenu () {
                this.show = !this.show;
            }
        },
        computed: {
            text () {
                return this.show ? '收' : '开';
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .app
        .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: blue
        .menu
            position: fixed
            bottom: 50px
            right: 10px
            width: 50px
            height: 50px
            border-radius: 50%
            transition: all .7s ease-in
            &.move-enter-active
                .inner
                    transform: translate3d(0, 0, 0)
                    transition-timing-function: cubic-bezier(0, .57, .44, 1.97)
                .inner-1
                    transition-delay: .1s
                .inner-2
                    transition-delay: .2s
                .inner-3
                    transition-delay: .3s
            &.move-enter, &.move-leave-active
                .inner
                    transition-timing-function: ease-in-out
                .inner-1
                    transform: translate3d(0, 60px, 0)
                    transition-delay: .3s
                .inner-2
                    transform: translate3d(40px, 40px, 0)
                    transition-delay: .2s
                .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: red
                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>