<!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>
vue 模拟加入购物车动画 源码
猜你喜欢
转载自blog.csdn.net/weixin_42595284/article/details/83069136
今日推荐
周排行