<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style> * { margin: 0; padding: 0 } .btn { padding: 6px 12px; background: #4ee58e; border: none; border-radius: 6px; color: #fff } .main-content { width: 100%; height: 900px; background: #abd6c6; color: #333; } .popup { position: fixed; top: 0; bottom: 0; left: 0; right: 0; /*visibility: hidden*/ } .visible { visibility: visible } .hidden { visibility: hidden } .popup .popup-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .6) } .popup .popup-content { position: fixed; bottom: 0; left: 0; right: 0; height: 50%; background: #ff6579; overflow: auto } .animated { animation-duration: 1s; animation-fill-mode: both } @keyframes slideOutDown { 0% { transform: translateZ(0) } to { visibility: hidden; transform: translate3d(0, 100%, 0) } } .slideOutDown { animation-name: slideOutDown; visibility: visible } @keyframes slideInUp { 0% { transform: translate3d(0, 100%, 0); visibility: visible } to { transform: translateZ(0) } } .slideInUp { animation-name: slideInUp; visibility: visible } </style> </head> <body> <div id="goods"> <div class="main-content"> <button class="btn" @click="toggle">点击出现</button> 页面内容 </div> <div class="popup hidden" :class="{visible:this.showflag}"> <div class="popup-mask"></div> <div class="popup-content animated" :class="slide"> <button class="btn" @click="toggle">点击消失</button> <div style="height: 800px;border: 1px red solid;">页面内容</div> </div> </div> </div> <script src="js/vue.min.js"></script> <script> var goods = new Vue({ el: '#goods', data: { showflag: false, init: false }, computed: { slide: function () { if (!this.init) { return ''; } else if (this.showflag) { return 'slideInUp'; } else { return 'slideOutDown'; } } }, methods: { toggle: function () { this.init = true; this.showflag = this.showflag ? false : true; } } }); </script> </body> </html>