<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { margin: 0; padding: 0; } .test { width: 100px; height: 100px; background-color: palegoldenrod; position: absolute; left: 0; } .v-enter, .v-leave-to { opacity: 0; left: 300px; } .v-leave-to, .v-leave { opacity: 1; left: 0; } .v-enter-active, .v-leave-active { transition: all 4s; } </style> <body> <div id="app"> <button @click="isShow=!isShow">按钮</button> <transition> <div class="test" v-if="isShow">issss</div> </transition> </div> <script src="./js/vue.js"></script> <script> new Vue({ el: "#app", data: { isShow: true }, methods: { } }) </script> </body> </html>
