<!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; } .page-wrapper { position: relative; } .title { font-size: 22px; font-weight: 600; color: #333; text-align: center; } ul li { color: #333; padding: 6px 12px; height: 30px; line-height: 30px; border-bottom: 1px solid #ccc; } .btn { padding-top: 20px; text-align: center; } button { padding: 12px 26px; display: inline-block; width: 120px; color: #fff; font-size: 16px; text-align: center; background: #0cc; border: none; border-radius: 6px; } .pop { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; overflow: auto; background: rgba(7, 17, 27, 0.8); } .pop.fade-enter-active, .pop.fade-leave-active { transition: all 1s ease } .pop.fade-enter, .pop.fade-leave-active { opacity: 0 } .pop-wrapper { min-height: 100%; width: 100%; } .pop-main { margin-top: 64px; padding-bottom: 84px; } .pop-close { position: relative; margin: -64px auto; width: 36px; height: 36px; clear: both; font-size: 32px; background: rgba(0, 0, 0, .7); color: #fff; border-radius: 100%; text-align: center; } .img-area { padding: 20px 10px; text-align: center; } .pop-wrapper img { width: 100%; } .pop-close i { display: inline-block; font-style: normal; font-size: 22px; line-height: 36px; } </style> </head> <body> <div id="app"> <div class="page-wrapper"> <div class="title">首页内容</div> <div class="btn"> <button type="button" @click="showPop()">点击出现</button> </div> <ul> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> <li>电子商务有限公司所有</li> </ul> <div id="transition-pop"> <transition name="fade" @before-enter="popComplete"> <div class="pop" v-show="popShow"> <div class="pop-wrapper"> <div class="pop-main"> <div class="img-area"> <img src="../img/bg.png"> </div> <div class="btn"> <button>下一页</button> </div> </div> </div> <div class="pop-close" @click="hidePop()"> <i>X</i> </div> </div> </transition> </div> </div> </div> <script src="../vue.js"></script> <script> var app = new Vue({ el: "#app", data: { popShow: false }, methods: { showPop: function () { this.popShow = true; }, hidePop: function () { this.popShow = false; }, popComplete: function () { console.log('000'); } } }).$mount('#transition-pop'); </script> </body> </html>
