css3在动画完成后执行事件
第一种方法:
用计时器,设定一个和动画时长一样的time,过time事件去执行这个函数。
setTimeout(function(){ },time);
第二种方法:
当-webkit-animation动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以了。
不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>webkitAnimationEnd</title>
<style type="text/css">
#div1{
margin: 200px auto 0;
width: 200px;
height: 200px;
color: #fff;
background-color: #000;
-webkit-animation: transform 3s 2 ease;
}
@-webkit-keyframes transform {
0%{
-webkit-transform: scale(1) rotate(50deg);
}
30%{
-webkit-transform: scale(2) rotate(100deg);
}
6%{
-webkit-transform: scale(0.5) rotate(-100deg);
}
100%{
-webkit-transform: scale(1) rotate(0); }
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var o = document.getElementById("div1"); o.addEventListener("webkitAnimationEnd", function() {
// this.className = "";
alert("动画结束");
})
</script>
</body>
</html>
css3在动画完成后执行事件的更多相关文章
- css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件
用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或其他一些事件.我们该怎么办呢. 第一种方法: 用计时器,设定一个和动画时长一样的time, ...
- jquery动画函数里面可以跟一个回调函数,表示动画结束后执行的代码
jquery动画函数里面可以跟一个回调函数,表示动画结束后执行的代码 使用js监听动画结束后进行的操作: $ele.fadeIn(300,function(){...}) $ele.fadeOut(3 ...
- js关闭或者刷新页面后执行事件
onbeforeunload 使用方法 window.onbeforeunload=function(){ return ''; } 有返回值才能弹出显示,或者有需要执行的事件也行.
- (判断)window.open()窗口被关闭后执行事件
$(function() { // start ready var $article_share=$('#body .article').find('li.share'); // $article_s ...
- JQuery 页面加载完成后执行事件
一: $(document).ready(function(){ //code }) 二: jQuery(document).ready(function(){ //code }) 三: window ...
- 监测c3动画过渡完成的事件
监测css3动画完成的事件 transitionend 用法: let element = document.getElementById("slidingMenu"); elem ...
- zTree默认勾选指定ID并执行事件
try { var arrs = $('#subjectClassID').val().split(","); var treeObj = $.fn.zTree.getZTreeO ...
- WPF动画结束后的行为方式
原文:WPF动画结束后的行为方式 在WPF中可以使用Animation来完成动画功能,如移动,旋转等,最近写的一个程序需要实现控件的移动,包括自动移动和手动控制.原理很简单,就是改变控件的Margin ...
- PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题
PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...
随机推荐
- Lowest Common Ancestor in a Binary Tree
二叉树最低公共祖先节点 acmblog If one key is present and other is absent, then it returns the present key as LC ...
- vue 倒计时返回首页
1. vue页面15分钟无操作时返回首页 2. 基于vue的倒计时demo 3. 在vue2.0项目中一个简单的倒计时功能 4. vue重新发送验证码 5. 表格<td>里面文字垂直显示
- 洛谷P1456 Monkey King
https://www.luogu.org/problemnew/show/1456 #include<cstdio> #include<iostream> #include& ...
- sparse representation 与sparse coding 的区别的观点
@G_Auss: 一直觉得以稀疏为目标的无监督学习没有道理.稀疏表示是生物神经系统的一个特性,但它究竟只是神经系统完成任务的副产物,还是一个优化目标,没有相关理论,这里有推理漏洞.实际上,稀疏目标只能 ...
- 兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法
兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return w ...
- springboot+mybatis使用PageHelper分页
项目结构和spring搭建mybatis请参考springboot整合mybatis.在这个基础上配置分页. 一:导入PageHelper依赖 <dependency> <group ...
- 博皮设计:HTML/CSS/Javascript 源码共享
首先感谢 sevennight 对我的大力帮助,由此他也成为了我的第一位园友:其次,由于本人并不了解 HTML/CSS,因此几乎都在 李宝亨 设计的 博皮源码 的基础上进行的修改:最后,为了获得 更加 ...
- Anaconda+django写出第一个web app(四)
前面对Models有了一些了解,今天开始进一步了解Views,了解Views如何和Models交互以及了解模板(templates). 打开main文件夹下的views.py,重新编写homepage ...
- UNIX网络编程 第6章 I/O复用:select和poll函数
UNIX网络编程 第6章 I/O复用:select和poll函数
- 解决 Electron 包下载太慢问题
项目下新建 .npmrc 文件,加入如下配置: electron_mirror=https://npm.taobao.org/mirrors/electron/ 即使用淘宝的源,重新 npm inst ...