<!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的更多相关文章

  1. vue transition

    Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...

  2. vue transition实现页面切换效果

    我们都知道vue可以做成单页应用 点击的时候就能切换  如果我们要添加一些视觉效果 比如页面切换的时候有一个缓冲效果 这个时候就需要用到vue里的transition这个标签 在使用这个标签之前需要了 ...

  3. 记录一下vue transition 过渡各状态（）

    .slide-fade-enter{   opacity: 0;   transform: translateX(100px);   /*从哪里开始过渡:在过渡之前我就把位置定义在100px的位置,并 ...

  4. vue学习笔记

    来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件.关于vue有一些点是文档中没有提及的,记录一下以便以后查询- 一.Vue的特点 新一代 Vue.js 框架非常关注如何用极少的外部特性 ...

  5. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  6. Vue入门笔记#过渡

    Vue过渡,可以在元素从DOM中移除,插入时自动调用过渡效果.根据设定,会适时的触发过渡效果. 在使用的目标标签里添加 transition: <div transition="my_ ...

  7. Vue.js相关知识1

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. vue.js笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> &l ...

  9. 初步学习vue.js

    vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...

  10. 【转】vue基础学习

    1.基本绑定:    new Vue(        {            el:'#elID',            data:{                // data obj     ...

随机推荐

  1. 今日头条 2018 AI Camp 5 月 26 日在线笔试编程题第二道——最小分割分数

    题目: 给 n 个正整数 a_1,…,a_n, 将 n 个数顺序排成一列后分割成 m 段,每一段的分数被记为这段内所有数的和,该次分割的分数被记为 m 段分数的最大值.问所有分割方案中分割分数的最小值 ...

  2. simhash和minhash实现理解

    文本相似度算法 minhash minhash 1. 把文档A分词形成分词向量L 2. 使用K个hash函数,然后每个hash将L里面的分词分别进行hash,然后得到K个被hash过的集合 3. 分别 ...

  3. Kprobe

    linux内核源码Documentation目录下存在kprobe介绍文档如下 Kprobes allows multiple probes at the same address.  Current ...

  4. TCP系列12—重传—2、Linux超时重传引入示例

    在前面我们概述了TCP的超时重传之后我们简单的看一下tcp超时重传的示例.首先简单的描述一下测试过程 1.设置/proc/sys/net/ipv4/tcp_early_retrans为2,关掉TLP功 ...

  5. grid++json页面数据传入

    最近遇到一个问题,就是要用Grid++做页面数据报表打印,但是翻了Grid++文档就是没有直接从页面上传数据的,都是要加载txt文档,填写txt文档的url.自己尝试直接页面上传JSON数据到Grid ...

  6. 认识简单的C

  7. GetTickCount 和getTickCount

    GetTickCount:正常读取时间函数 getTickCount:不知道是什么鬼东东函数 都包含在windows.h中..运行出的结果天壤之别~~~

  8. [OS] 信号量（Semaphore）

    一个信号量S是一个整型量,除对其初始化外,它只能由两个原子操作P和V来访问.P和V的名称来源于荷兰文proberen(测试)和verhogen(增量),后面亦将P/V操作分别称作wait(), sig ...

  9. mac快速安装程序

    homebrew:mac套件管理 官网 :http://brew.sh/index_zh-cn.html macport: 官网:https://www.macports.org/

  10. 命名空间（namespace）// 友元函数

    17.2.命名空间 命名空间(namespace)为防止名字冲突提供了更加可控的机制.命名空间能够划分全局命名空间,这样使用独立开发的库更加容易了.一个命名空间就是一个作用域,通过在命名空间内部定义库 ...