VUE错误记录 - 小球模拟购物车
<body> <div id="app"> <input type="button" value="Add to Cart" @click="flag=!flag"> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <!-- 这里 @after-enter="afterEnter" 后面不要加括号。 不加括号,表示直接调用这个方法。 加括号 表示调用 方法的完成之后的取值。 --> <div class="ball" v-show="flag"></div> </transition> </div> <script> var vm = new Vue({ el:'#app', data:{ flag: false, // 这里是布尔值,不是字符串,不要加引号。 }, methods: { beforeEnter(el){ // el.style.transition = transform(0, 0); el.style.transform = 'translate(0, 0)' }, enter(el, done){ el.offsetWidth; // el.style.transition = transform(100, 450); // el.style.opacity = 0; el.style.transform = 'translate(150px, 450px)'; el.style.transition = 'all 1s ease'; done(); }, afterEnter(el){ this.flag =! this.flag; }, }, }); </script> </body>