vue 模擬加入購物車動畫 原始碼
阿新 • • 發佈：2018-11-07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模擬加入購物車動畫</title> <style type="text/css"> .ball{ width: 30px; height: 30px; position: absolute; border-radius: 50%; background: yellow; } </style> </head> <body> <div id="app"> <input type="button" value="動畫" @click = 'flag = !flag'> <transition v-on:before-enter = 'beforeEnter' v-on:enter = 'enter' v-on:after-enter = 'afterEnter'> <div class="ball" v-show = 'flag'></div> </transition> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script> <script type="text/javascript"> let vm = new Vue({ el:'#app', data:{ flag:false }, methods:{ beforeEnter(el){ el.style.transform = 'translate(0, 0)' }, enter(el,done){ el.offsetWidth; el.style.transform = 'translate(200px, 300px)'; el.style.transition = 'all 2s linear'; done() }, afterEnter(el){ this.flag = !this.flag }, } }) </script> </body> </html>