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

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

相关文章
|
2天前
|
JavaScript 前端开发 UED
JavaScript中的事件委托机制及实践应用
事件委托是JavaScript中常用的性能优化技巧,通过将事件监听器绑定在父元素上,实现对子元素事件的统一管理,减少页面中事件处理函数的数量,提升页面性能。本文将介绍事件委托的原理和实践应用,帮助开发者更好地理解和运用这一技术。
|
3天前
|
前端开发 JavaScript 开发者
Canvas库 fabric.js可以实现哪些功能? 动图介绍
fabric.js是一个canvas库,今天整理了一下fabric.js可以实现的功能,用动图的形式分享给大家,方便快速了解fabric.js。
Canvas库 fabric.js可以实现哪些功能? 动图介绍
|
21天前
|
JavaScript 前端开发
js的常用事件
js的常用事件
11 1
|
21天前
|
JavaScript 前端开发 API
在js中如何去实现全屏事件?
在js中如何去实现全屏事件?
16 0
|
21天前
|
JavaScript
js中的事件冒泡和事件捕捉
js中的事件冒泡和事件捕捉
9 0
|
21天前
|
JavaScript 前端开发
JavaScript回车事件
JavaScript回车事件
20 0
|
21天前
|
JavaScript 前端开发
JavaScript如何实现 选项卡功能
JavaScript如何实现 选项卡功能
10 0
|
21天前
|
存储 JavaScript
js如何实现分页功能
js如何实现分页功能
8 0
|
21天前
|
JavaScript 前端开发
|
21天前
|
JavaScript