<!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. js如何处理字符串中带有↵字符

    js或vue中如何处理字符串中带有↵字符 split('\n') 使用split('\n')将字符串分割成数组就行 如果我们在vue中,只需要在页面中绑定变量时操作split('\n')就可以了: & ...

  2. 团队Beta阶段事后分析

    团队Beta阶段事后分析 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决用户的休闲娱乐问题,为用户提供好玩的模拟经营类的游戏,游戏主题 ...

  3. 二叉搜索树(BST)---python实现

    github:代码实现 本文算法均使用python3实现 1. 二叉搜索树定义   二叉搜索树(Binary Search Tree),又名二叉排序树(Binary Sort Tree).   二叉搜 ...

  4. 《剑指offer》---顺时针打印矩阵

    本文算法使用python3实现 1. 问题1 1.1 题目描述:   输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 ...

  5. css那些事儿1 css选择符与管理

    结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库 缓存 消息队列的路线如果没有大型 ...

  6. Qt单元测试（QTestLib）

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt单元测试(QTestLib)     本文地址:http://techieliang.co ...

  7. 【Docker 命令】- images命令

    docker images : 列出本地镜像. 语法 docker images [OPTIONS] [REPOSITORY[:TAG]] OPTIONS说明: -a :列出本地所有的镜像(含中间映像 ...

  8. python: error while loading shared libraries: libpython2.7.so.1.0: cannot open shared object file: No such file or directory

    #vi /etc/ld.so.conf.d/python2.7.conf   加入/usr/local/python27/lib   保存退出后执行 #ldconfig

  9. 分享几个.Net计划任务组件

    Quartz http://www.quartz-scheduler.net/ Hangfire http://hangfire.io/ Install-Package Hangfire 使用OWIN ...

  10. iOS-学习UIKIt框架的重要性

      前言: 众所周知,我们的移动设备的屏幕上可以展示很多图形界面,作为用户的我们可以通过屏幕上的图形界面浏览信息,也可以通过与图形界面的简单交互,在移动设备上实现各种各样的功能操作.....可以说,没 ...