vue 模拟加入购物车动画源码

最新推荐文章于 2024-05-21 11:37:12 发布

卟良亻

最新推荐文章于 2024-05-21 11:37:12 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42595284/article/details/83069136

版权

<!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>

卟良亻

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue 模拟加入购物车动画源码

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;模拟加入购物车动画&lt;/title&gt; &lt;style type="text/css"&gt; .ball{ w
复制链接

扫一扫