动画-钩子函数实现小球半场动画|学习笔记

简介: 快速学习动画-钩子函数实现小球半场动画

开发者学堂课程【Vue.js 入门与实战动画-钩子函数实现小球半场动画】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8168


动画-钩子函数实现小球半场动画


目录

一、首先需要画出小球

二、添加按钮(模拟加入购物车)

三、添加动画

 

之前已经学过了如何使用钩子函数怎么定义动画,本节主要讲解怎么通过钩子函数模拟小球的半场动画。

代码如下:

 

一、首先需要画出小球

Cleane.  .ball

Width:15px

Height:15px

Border-radius:50%

Background-color:red;

}

</style>

</head>

<body>

<div id=“app”>

<div class=“ball”></div>

</div>

image.png执行可以看到小球已经画出。

 

二、添加按钮(模拟加入购物车)

<body>

<div id=“app”>

<input type=“button” value=“快到碗里来”@click=“!flag”

image.png


三、添加动画:

<body>

<div id=“app”>

<input type=“button” value=“快到碗里来”@click=“!flag”

<!--1.使用 transition元素把小球包裹起来-->

</transition

@before-enter=“”

@enter=“”

@after-enter=“”>

<div class=“ball”></div>

</div>

<acript>

Vue.directive(’focus’,function(el){})

Var vm=new vue{{

el :“app”,

Data:(

Flag:false

},

Methods:{

//注意:动画钩子函数的第一个参数;el。表示要执行动画的那个DOM元素,是个原生的JS.DOM对象

//大家可以认为,el是通过document.getelement.BYid(’’)方式获取的原生JS.DOM对象

//beforeenter 表示动画入场之前,此时,动画尚未开始,可以在beforeenter中,设置元素开始动画之前的起始样式。

小球在动之前需要有一个启示位置,启示需要通过以下代码实现,代表小球在开始前在0.0位置:

el.style.transform=“transition(0,0)”

},

beforeEnter(el){],

enter(el){}.

//enter表示动画开始之后的样式,这里,可以设置小球完成动画之后的,结束状态。

el.style.transform=“transition(0,0)”

el.style.transform=“transition(150px,450px)”

el.style.transform=“transition all is ease”

此时执行会发现,小球确实动起来,但是没有中间过渡过程。所以在这个之前需要设置 El.offsetwidth,代码如下:

El.offsetwidth

//这句话,没有实际作用,但是如果不写,出不来动画效果

el.style.transform=“transition(0,0)”

el.style.transform=“transition(150px,450px)”

el.style.transform=“transition all is ease”

所以,所以通过执行,可以认为 El.offsetwidth 会强制动画刷新,这里 El.offsetwidth 不是必须的,还可以写成 El.offsetheight ,也可以写成 El.offsetleft、 El.offsettop等。只要和 El.offset 相关即可。

Afterenter(el){

//动画完成后,会调用afterenter

//console.log(‘OK’)

This.flag=!this.flag

}};

</script>

执行会发现,消失需要一定的时间,如果不想存在这个时间,可以使用以下代码:

enter(el.done)

Done()

//这里的 done。起始就是 afterenter 这个函数,也就是说:done 是一个函数的引用。

当只用 JavaScript 过渡的时候,在 enter 和 leave 中,回调函数 done 是必须的,他们会被同步调用,过渡会立即完成。如果不调用 done ,函数执行时就会出现延迟等情况。

以上,已经完成了小球半场动画的全部学习。

相关文章
|
12月前
|
安全 NoSQL Redis
Docker自定义网络
Docker自定义网络
139 11
|
12月前
|
传感器 人工智能 自动驾驶
未来出行:无人驾驶汽车的技术革新与挑战
本文深入探讨了无人驾驶汽车背后的技术原理,包括感知、定位、决策和执行四个核心系统。同时,文章分析了当前自动驾驶技术的发展现状,并指出了技术标准不统一、基础设施不完善和法律法规滞后等主要挑战。最后,展望了无人驾驶汽车未来的发展趋势,强调了跨学科合作和政策支持的重要性。
517 4
|
存储 数据安全/隐私保护 虚拟化
真人出镜的录屏软件,上手非常简单!文末有福利!
但,真的不要再来找不坑老师要camtasia的安装包了,它已经被国内某公司代理,四处投诉、发律师函呢!想要使用只能购买了!我已经多年不用这软件了。
465 0
|
SQL 缓存 API
SqlAlchemy 2.0 中文文档(二十八)(2)
SqlAlchemy 2.0 中文文档(二十八)
205 0
|
Java 关系型数据库 MySQL
基于Java的高校校园点餐系统
基于Java的高校校园点餐系统
|
存储 编解码 Linux
rodert教你学FFmpeg实战这一篇就够了 - 音视频处理入门篇
rodert教你学FFmpeg实战这一篇就够了 - 音视频处理入门篇
190 1
|
存储 Shell 数据安全/隐私保护
7段代码搞懂Python条件语句
7段代码搞懂Python条件语句
163 0
|
Java 数据库 微服务
Seata常见问题之Seata的jdk17启动seata1.7.0报错如何解决
Seata 是一个开源的分布式事务解决方案,旨在提供高效且简单的事务协调机制,以解决微服务架构下跨服务调用(分布式场景)的一致性问题。以下是Seata常见问题的一个合集
|
前端开发 JavaScript 数据处理
用Python轻松制作一个股票K线图网站
用Python轻松制作一个股票K线图网站
225 0
|
消息中间件 canal Kafka
flink cdc 数据问题之数据堆积严重如何解决
Flink CDC(Change Data Capture)是一个基于Apache Flink的实时数据变更捕获库,用于实现数据库的实时同步和变更流的处理;在本汇总中,我们组织了关于Flink CDC产品在实践中用户经常提出的问题及其解答,目的是辅助用户更好地理解和应用这一技术,优化实时数据处理流程。