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