<!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. HDU 4302 Holedox Eating (线段树模拟)

    题意:一个老鼠在一条长度为L的直线上跑,吃蛋糕,老鼠只能沿直线移动.开始时没有蛋糕,老鼠的初始位置是0. 有两个操作,0 x 代表在位置x添加一个蛋糕: 1 代表老鼠想吃蛋糕.老鼠每次都会选择离自己最 ...

  2. HDU 2490 Parade(DPの单调队列)(2008 Asia Regional Beijing)

    Description Panagola, The Lord of city F likes to parade very much. He always inspects his city in h ...

  3. php+原生ajax实现图片文件上传功能实例

    html+js 代码 <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传文件</title> ...

  4. default & delete

    一.使用“=default” 1. 显式生成拷贝控制成员的合成版本 class A { public: A() = default; A(const A &) = default; A& ...

  5. 软件工程 作业part1 自我介绍

    自我介绍 老师您好,我叫宋雨,本科在长春理工大学,专业是计算机科学与技术. 1.回想一下你曾经对计算机专业的畅想:当初你是如何做出选择计算机专业的决定?你认为过去接触的课程是否符合你对计算机专业的期待 ...

  6. DWORD WORD到INT的转换

    最近在做一个有关TCP/TP通信的消息解析,涉及到了这方面的转换,记录一下. 首先,如果是在网络传输.消息解析的情况下,要注意一下网络传送使用的是大端还是小端模式,这影响到我们的高低位的传输顺序. W ...

  7. Alpha 冲刺3

    队名:日不落战队 安琪(队长) 今天完成的任务 组织第三次站立式会议. 完成了个人信息前端界面. 明天的计划 草稿箱前端界面. 个人信息扩展界面框架. 还剩下的任务 回收站前端界面. 信息修改前端界面 ...

  8. OSG数学基础:坐标系统

    坐标系是一个精确定位对象位置的框架,所有的图形变换都是基于一定的坐标系进行的. 三维坐标系总体上可以分为两大类:左手坐标系和右手坐标系. 常用的坐标系:世界坐标系.物体坐标系和摄像机坐标系. 世界坐标 ...

  9. java中多种方式读文件

    转自:http://www.jb51.net/article/16396.htm java中多种方式读文件 一.多种方式读文件内容. 1.按字节读取文件内容 2.按字符读取文件内容 3.按行读取文件内 ...

  10. perf record -c

    如果perf record -c -c后面接的是sample_period,也就是说你让这个事件没 我的loop进程一直在执行,我的CPU的频率是2.6G hz,也就是说每一秒会有2,600,000, ...