<!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. Fluent Python: @property

    Fluent Python 9.6节讲到hashable Class, 为了使Vector2d类可散列,有以下条件: (1)实现__hash__方法 (2)实现__eq__方法 (3)让Vector2 ...

  2. Linearization of the kernel functions in SVM（多项式模拟）

    Description SVM(Support Vector Machine)is an important classification tool, which has a wide range o ...

  3. 20145214 《Java程序设计》第7周学习总结

    20145214 <Java程序设计>第7周学习总结 教材学习内容总结 时间的度量 格林威治标准时间(GMT),现已不作为标准时间使用,即使标注为GMT(格林威治时间),实际上谈到的的是U ...

  4. c++ 第五次作业（计算器第三步）

    第五次作业 (计算器第三步) 项目源文件地址:calculator 本次作业改进情况 加入多种读入选择 正常输出答案 -a 选项,输出表达式以及值 -f 选项,从指定文件读入,并把答案输出到指定文件 ...

  5. Swift中避免在多个文件中重复import相同的第三方包

    swift中由于有命名空间的存在,在同一个target创建的文件,都可以不引用直接就可以拿来使用,但是不同target之间必须要import 之后才能使用,在不同的文件中使用都要重复的import这个 ...

  6. wine update错误 "the cache has no package" error when wine update is available

    网址:https://bugs.launchpad.net/pipelight/+bug/1318321/

  7. Atom IDE开发工具， ASCII艺术评论， ninimap 插件

    1 ASCII Art Comments One neat trick is to use ASCII art to create huge comments visible in the minim ...

  8. SQL SERVER 存储过程中SELECT 返回值如何赋值给变量

    今天在处理一个问题时,使用到一个存储过程,是用于更新并获取最新ID的.在使用过程中,需要获取到这个ID并赋值给变量,结果用EXEC @ID = 存储过程的方式获取失败了.具体情况如下: 为了还原整个情 ...

  9. 第一篇：python基础_1

    本篇内容 Python介绍 安装 第一个程序(hello,world) 变量 用户输入(input) 数据类型 数据运算 if判断 break和continue的区别 while 循环 一. Pyth ...

  10. 【bzoj4921】[Lydsy六月月赛]互质序列 暴力

    题目描述 给出一个序列,要求删除一段非空区间,使得剩下的数的个数大于等于2.求所有删除方式剩下的数的最大公约数的和. 输入 第一行包含一个正整数n(3<=n<=100000),表示序列的长 ...