Vue中JavaScript钩子transition圆点半场动画（加入购物车）

以你之姓@ 2021-10-19 07:08 265阅读 0赞

<!DOCTYPE html>
    <html lang="zh">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title>圆点动画</title>
    		<script src="lib/vue-2.4.0.js"></script>
    		<style>
    			.ball{
    			background-color: red;
    			width: 30px;
    			height: 30px;
    			border-radius: 50%;
    		}
    	</style>
    	</head>
    	<body>
    		<div id="app">
    			<input type="button" @click="flag=!flag" value="添加到购物车" />
    			
    			<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    				<div v-show="flag" class="ball">
    				</div>
    			</transition>
    		</div>
    		<script>
    			var 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(150px,450px)"
    						el.style.transition='all 1s ease'
    						// 完成,调用done
    						done()
    					},
    					afterEnter(el){
    						this.flag=!this.flag
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序加入购物车动画

微信小程序加入购物车动画 `*人狠话不多，直接代码搞起*` [点击github下载小demo,可以直接运行看效果，了解二次贝塞尔曲线的可以自己玩。][githu...

小鱼儿/ 2024年04月18日 17:36/ 0 赞/ 88 阅读

相关仿淘宝加入购物车动画

pragma mark - 动画（加入购物车） - (void)shopBagAni { CGRect startRect;

╰半夏微凉°/ 2023年10月17日 08:13/ 0 赞/ 27 阅读

相关 vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)

vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画) <!DOCTYPE html> <html lang="en"> <h

Love The Way You Lie/ 2023年06月29日 05:53/ 0 赞/ 30 阅读

相关 uni-app加入购物车动画效果

index.vue <template> <view class="content"> <view class="list">

今天药忘吃喽~/ 2022年11月05日 08:37/ 0 赞/ 626 阅读

相关 19、【购物车模块】——加入购物车功能开发

购物车功能的开发是用户在前端将商品加入到购物车中的操作，加入的时候分两种情况，一种是商品已经在购物车里面了，如果用户再添加，我们只要增加对应的数量即可；第二种是原来购物车不存在

﹏ヽ暗。殇╰゛Y/ 2022年05月08日 14:06/ 0 赞/ 319 阅读

相关加入购物车功能实现

在models中建一个用户模型user,用户模型需要关联引入mongoose var mongoose = require('mongoose'); 拿到mongoos

青旅半醒/ 2022年04月14日 05:44/ 0 赞/ 301 阅读

相关 vue 使用JavaScript 钩子实现半场动画

参考视频黑马程序员 vue教程 vue JavaScript 钩子官方文档： [https://cn.vuejs.org/v2/guide/transitions.ht

「爱情、让人受尽委屈。」/ 2022年04月01日 06:39/ 0 赞/ 236 阅读

相关使用钩子函数模拟小球半场动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

深碍√TFBOYSˉ_/ 2021年12月16日 19:43/ 0 赞/ 240 阅读

相关 Vue教程(动画-半场动画)

上篇文章我们介绍了过渡动画的实现，包括完整的入场和离场动画，但是在实际过程中我们有时可能仅仅需要使用半场动画，比如淘宝购物车的下单处理等。 ![在这里插入图片描述

心已赠人/ 2021年11月29日 11:04/ 0 赞/ 367 阅读

相关 Vue中JavaScript钩子transition圆点半场动画（加入购物车）

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">

以你之姓@/ 2021年10月19日 07:08/ 0 赞/ 266 阅读