<!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. docker容器学习笔记

    docker是通过内核虚拟化技术来提供容器的资源隔离与安全保障. docker组成: docker client.docker server.docker组件(镜像(image).容器(contain ...

  2. python leveldb 文档

    标签(空格分隔): python leveldb import leveldb db = leveldb.LevelDB('./db') db.Put('hello', 'world') print ...

  3. STM32串口通信UART使用

    STM32串口通信UART使用 uart使用的过程为: 1. 使能GPIO口和UART对应的总线时钟 2. 配置GPIO口的输出模式 3. 配置uart口相关的基本信息 4. 使能uart口的相关的中 ...

  4. vue开发学习中遇到的问题以及解决方法

    1:node-sass 安装失败,可使用 cnpm 安装 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v ...

  5. TCP系列33—窗口管理&流控—7、Silly Window Syndrome(SWS)

    一.SWS介绍 前面我们已经通过示例看到如果接收端的应用层一直没有读取数据,那么window size就会慢慢变小最终可能变为0,此时我们假设一种场景,如果应用层读取少量数据(比如十几bytes),接 ...

  6. shell练习题讲解

    写一个脚本,计算100以内所有的奇数的和以及所有偶数的和,分别显示出来#! /bin/bashsum1=0for i in `seq 1 2 100`do sum1=$[$sum1+$i]doneec ...

  7. 载入其他同名源文件导致vs编译错误

    今天下午工程编译的时候总是通不过,提示1,某个类没有某个成员,可是我去该类的头文件下查看,确实包括了这个成员啊.2,没有某个类,可是我明明定义了的. 检查了好久才发现 原来是,我打开了其他工程下的某一 ...

  8. Prepare方法和UnPrepare方法

    Query组件提供的Prepare方法的作用是通知BDE或数据库服务器优化并准备执行SQL操作.Query的Prepare方法能优化执行的原因在于该方法是是在SQL语句执行前就对其进行分析.检查和编译 ...

  9. 【bzoj4300】绝世好题 dp

    题目描述 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 输入 输入文件共2行. 第一行包括一个整数n. 第二行包括n个 ...

  10. Go语言【第十四篇】：Go语言基础总结

    Go语言类型转换 类型转换用于将一种数据类型的变量转换为另外一种类型的变量,Go语言类型转换基本格式如下: type_name(expression) type_name为类型,expression为 ...