原生JS检测CSS3动画是否结束的方法详解
本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考，具体如下：
不知道大家在做网页的时候有没有碰到这种情况：当你使用CSS3的动画属性时，想要在动画结束后添加一系列操作，但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了。
针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义：
代码如下：
<!DOCTYPE html>
<html lang="en">
<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>通过原生js检测CSS3的动画结束</title>
<style>
*{padding: 0;margin: 0;}
.test{
width: 200px;
height: 200px;
border: 1px soli black;
background: red;
transition-property:width;
transition-duration: 3s;
}
/* 动画 */
.test.move{
width:600px;
}
button{
width: 80px;
height: 25px;
font-size: 16px;
text-align: center;
line-height: 25px;
}
</style>
</head>
<body>
<div class="test" id="main">
</div>
<button id="play">开始运动</button>
</body>
<script>
// 示例动画主要是改变div的宽度
// 主要是通过检测transition的值是否为transitionend
function init() {
var main = document.getElementById('main');
var play = document.getElementById('play');
var test = document.getElementsByClassName('test')[0];
// 兼容性写法
transitions = {
// 兼容IE
'transition': 'transitionend',
// 兼容Opera
'OTransition': 'oTransitionEnd',
// 兼容Firefox
'MozTransition': 'transitionend',
// 兼容Google
'WebkitTransition': 'webkitTransitionEnd'
};
function getTransitions() {
var t;
for (t in transitions) {
// t即transition，OTransition，MozTransition，WebkitTransition
if (main.style[t] !== undefined) {
return transitions[t];
}
}
}
// 按钮添加click事件
play.onclick = function () {
main.classList.add('move');
};
// 接收返回的当前浏览器的transition的值
var setTransitions = getTransitions();
// 添加监听事件
setTransitions && main.addEventListener(setTransitions,function (params) {
alert('动画结束');
// 删除类名move
main.classList.remove('move');
},false)
}
init();
</script>
</html>
效果如下：
可以看到当动画结束时才弹出弹框可以验证方法的可行性。
最后提一下，这个方法仍存在一些问题，比如你改变两个属性：宽度和高度，可能就会触发这个方法两次或者多次，所以使用的时候要注意一下。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript与css3动画结合使用小结
当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉得win7.win8没xp好用.但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的.但手机硬件处理能力却又十分有限.在四核.八核手机横行的今天,依然有像我这样使用双核或单核手机的.js虽好,单奈何接触不多,调不好那种感觉.一个简单的页面滑动,在i7的pc上运行十分流畅,可是,
-
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei
-
JS+CSS实现网页加载中的动画效果
本文实例为大家分享了JS实现网页加载中效果的具体代码,供大家参考,具体内容如下 需要材料: 一张loading动画的gif图片 基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框 页面开始发送Ajax请求数据时,显示模态框 请求完成,隐藏模态框 下面我们通过Django新建一个web应用,来简单实践下 实践 1.新建一个Django项目,创建应用app01, 配置好路由和static,略.将gif动图放到静态文件夹下,结构如下: 2.视图中定义一个函数,它返回页面test.
-
原生javascript+css3编写的3D魔方动画旋扭特效
一直从事于后端编程工作,工作中也经常接触和使用一些前端技术,但大多数还是用于操作和控制数据与客户端交互工作.随着互联网技术的发展以及硬件性能的不断提升,人们对于交互式体验已变得越来越重视,进而前端技术已经越来越突显出它的重要性,特别是一些炫酷的特效,精美的UI设计,都使人眼前一亮,顿时觉得网站平台都高大上不少,很博人们眼球,给人们以很好的视觉冲击,特别是现在的css3,HTML5技术的更新,使得以更小的代价就可以轻松实现这些效果,故此,顿时膜拜起前端技术,悠然起了兴趣,跃跃欲试,随机利用css3
-
js动画(animate)简单引擎代码示例
用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内
-
javascript判断css3动画结束 css3动画结束的回调函数
css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 复制代码 代码如下: var transitions = { 'transition':'transitionend',
-
深入探究使JavaScript动画流畅的一些方法
基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javascript的DOM动画库,如Velocity.js和GSAP,看其是如何比jQuery和CSS动画效果更具性能的. jQuery 让我们先从基础的开始: JavaScript 和 jQuery 被错误的混为一谈了. JavaScript 动画是很快的. jQuery 把它放慢了下来.为什么?因为 -
-
用Move.js配合创建CSS3动画的入门指引
在网站上,CSS3 的过渡和动画是当前创建轻量级动画的首选方法.不幸的是,很多开发者发现他们自己的语法和复杂和混乱的.如果这听起来像你自己,对你来说,或许Move.js是完美的方案.Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库.本教程将探讨Move.js的基础知识,并提供一个在线demo. 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API.让我们假设有一个带类 box 的 div 元数,当鼠标 移动到 div 上面
-
JS简单实现动画弹出层效果
JS简单实现动画弹出层效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>动画弹出层&l
-
原生JS检测CSS3动画是否结束的方法详解
本文实例讲述了原生JS检测CSS3动画是否结束的方法.分享给大家供大家参考,具体如下: 不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3的动画属性时,想要在动画结束后添加一系列操作,但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了. 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义: 代码如下: <!DOCTYPE html> <ht
-
原生js实现贪食蛇小游戏的思路详解
先不多说先上图 下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>
-
JavaScript实现网页带动画返回顶部的方法详解
服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a href=
-
JS前端常见的竞态问题解决方法详解
目录 什么是竞态问题 取消过期请求 XMLHttpRequest 取消请求 fetch API 取消请求 axios 取消请求 可取消的 promise 忽略过期请求 封装指令式 promise 使用唯一 id 标识每次请求 「取消」和「忽略」的比较 「取消」更实际 「忽略」更通用 总结 什么是竞态问题 竞态问题,又叫竞态条件(race condition),它旨在描述一个系统或者进程的输出依赖于不受控制的事件出现顺序或者出现时机. 此词源自于两个信号试着彼此竞争,来影响谁先输出. 简单来说,竞
-
JS疑惑的数据类型及类型判断方法详解
目录 前言 数据类型 类型判断 一.typeof方法 二.Object.prototype.toString.call()方法 小插曲 三.Array.isArray() 四.obj instanceof Object 结语 前言 关于javascript这门语言的数据类型你了解多少呢?你有什么方法能够快速的判断数据类型呢?如果可以那如何实现类型转换呢?带着这三个问题开始我们今天的学习吧 数据类型 在javascript中数据类型我们一般分为基本数据类型(值类型) 和 引用数据类型(对象类型):
-
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
前言 相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. 所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求; 另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大. 在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图): 实现移动端的轮播图要
-
原生JS实现的自动轮播图功能详解
本文实例讲述了原生JS实现的自动轮播图功能.分享给大家供大家参考,具体如下: 轮播图的用处 轮播图是现在网站网页上最常见的效果之一,很多网站上都会用到,淘宝京东等等.有些自动选项卡也是需要用到的,而且它的可重复性高.在这里分享一下,用js原生代码,实现轮播图的常见效果! 轮播图的原理 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过定时器实现自动播放. Html布局 首先父容器banner存放所有内容,子容器img-list存放图片.子容器list存放按钮小圆点.圆点我使
-
JS查找数组中重复元素的方法详解
本文实例讲述了JS查找数组中重复元素的方法.分享给大家供大家参考,具体如下: JS的数据类型有一个数组.今天我们就来谈谈对数组的一种处理.相信很多人都遇到过从数组中查找出不重复的元素,但是我遇到的却是从数组中查找出重复的元素. 从js数组中查找出不重复的元素的方法有很多,下面就给大家列举一个: <!DOCTYPE html> <html> <body> <script> Array.prototype.deleteEle=function(){ var ne
-
js 实现一些跨浏览器的事件方法详解及实例
js实现一些跨浏览器的事件方法 用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: function(element, type, handler) {/* 添加事件 */ if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (ele
-
JS实现导出Excel的五种方法详解【附源码下载】
本文实例讲述了JS实现导出Excel的五种方法.分享给大家供大家参考,具体如下: 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <sc