js 功能-过渡结束事件 & amp;动画结束事件|学习笔记

简介: 快速学习 js 功能-过渡结束事件 & amp;动画结束事件

开发者学堂课程【移动 Web 前端开发:js 功能-过渡结束事件 & amp;动画结束事件】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8417


js 功能-过渡结束事件&动画结束事件


内容介绍

一、课前回顾

二、代码

 

一、课前回顾

完成轮播图效果,完成轮播图效果之前,了解了在移动端特有的事件touch,包含了三个 start、move、end 其中最后一个 cancel 只需了解即可,建议使用 addachevent 来进行绑定,绑定当中的事件对象和以往的事件有什么不同?

了解了触摸点集合,每个触摸点又包含哪些信息呢?client、page、screen 三个坐标进行了解。当了解了 touch 之后,轮播图的实现,总结了5点功能以及对应的方式,提前获取需要的元素,通过定时器,过度,位移实现了无缝滚动,无缝滑动。

发现了一个问题,在滚动的时候,图片的最后一张并未与第一张衔接上,如何使之衔接上是一个很重要的问题。

从一张图切换到下一张图的过程需要0.2秒,过渡需要0.2秒,从第一张图片左上角到第二张图片左上角这段位移需要0.2秒的时间,花0.2秒来实现这个动画。

image.png

从第八张到移动到第九张,索引为一,因为第九张和索引为1那张是一样的,是索引变成9的时候还需要花0.2秒时间才能把图片显示出来,等9这张图片完全显示出来,然后再瞬间定位到第一张图片,等第九张图片显示出来也可称为动画结束之后,如果当前索引是9瞬间定位到第一张。

 

二、代码

怎么监听过渡结束这个时间点 过度结束事件

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="utf-8">

<title>过渡和动画  结束事件</title>

<style>

body{

margin: 0;

padding: 0;

}

div{

width: 100px;

height: 100px;

/*transition: all 2s;*/

background: red;

animation: big 4s;

}

@keyframes big{

from{}

to{

width: 200px;

height: 200px;

}

}

</style>

</head>

<body>

<div></div>

<script>

/*监听  transitionend  过渡结束事件*/ document.querySelector('div').addEventListener('transitionend',function(){

console.log('transitionend');

});

/*监听  animationend  动画结束事件*/ document.querySelector('div').addEventListener('animationend',function(){

console.log('animationend');

});

</script>

</body>

</html>

效果截图:

 image.png

这两个事件就可以解决不使用接触类做的动画,也能监听到每一次动画的过渡跟结束,来做其他事情。

相关文章
|
3天前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
31 10
|
4天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
25 3
|
17天前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
39 8
|
1月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
26天前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
2月前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
2月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
56 5
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
77 5
|
定位技术
arcgisapi for javascript4.0学习笔记4.0新特性
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/51842547 arcgisapi for javascript4.
793 0
|
2月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
43 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章