<!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. Hybrid APP基础篇(五)->JSBridge实现示例

    说明 JSBridge实现示例 目录 前言 参考来源 楔子 JS实现部分 说明 实现 Android实现部分 说明 JSBridge类 实现 Callback类 实现 Webview容器关键代码 实现 ...

  2. vue.js 创建组件 子父通信 父子通信 非父子通信

    1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. Linux 应用笔记

    Linux 应用笔记 Linux 应用笔记 小书匠 Raspberry Pi 常用命令 CentOs Raspberry Ubuntu python 实用教程 Vim 权限问题 内存分配 shell ...

  4. File Searching

    Description Have you ever used file searching tools provided by an operating system? For example, in ...

  5. Thunder团队第三周 - Scrum会议4

    Scrum会议4 小组名称:Thunder 项目名称:i阅app Scrum Master:邹双黛 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传 ...

  6. 20172333 2017-2018-2 《Java程序设计》第10周学习总结

    20172333 2017-2018-2 <Java程序设计>第10周学习总结 教材学习内容 第十三章 集合是一个对象,一个保存其他对象的数据库. 集合可以保存不同种类的对象也可以保存同种 ...

  7. python异步初步窥探

    1.异步之难:因为其执行吮吸不可预料,当下正要发生什么事件不可预料.        程序下一步行为往往依赖上一步值执行结果,如何知晓上次异步调用已完成并获取结果,        回调成了必然选择,那又 ...

  8. ASP.NET 使用MVC4的EF5 Code First 入门(一)：创建数据库

    一.基本流程 建立模型→建立控制器→EF框架自动生成视图的数据库 二.基本理论 1.约定优于配置(Convention Over Configuration) 设计不好的框架通常需要多个配置文件,每一 ...

  9. 转 linux安装swoole扩展

    linux安装swoole扩展 发表于2年前(2014-09-03 14:05)   阅读(4404) | 评论(3) 7人收藏此文章, 我要收藏 赞2 上海源创会5月15日与你相约[玫瑰里],赶快来 ...

  10. 第三章 持续集成jenkins工具使用之邮件配置

    1   Email Extension Plugin插件安装 持续集成很重要的一环就是及时将构建结果通知到对应的责任人,如:构建失败了,至少需要下发通知给造成本次构建失败的开发人员,如果包含自动化测试 ...