<!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>
