时间:2021-05-26
css3 的时代,css3--动画 一切皆有可能;
传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件;
transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件
复制代码 代码如下:
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
下面附上源代码:
复制代码 代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>suface js判断css动画是否结束</title>
</head>
<body>
<p>一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持。<br> </p>
<style type="text/css">
.sample {
width: 200px;
height: 200px;
border: 1px solid green;
background: lightgreen;
opacity: 1;
margin-bottom: 20px;
transition-property: opacity;
transition-duration:3s;
}
.sample.hide {
opacity: 0;
}
</style>
<div class="sample">css3动画过度慢慢隐藏(transition-duration:3s;)</div>
<p><button onclick="this.style.display='none';startFade();">慢慢消退,检测结束事件</button></p>
<script>
(function() {
var e = document.getElementsByClassName('sample')[0];
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
alert('css3运动结束!我是回调函数,没有使用第三方类库!');
});
startFade = function() {
e.className+= ' hide';
}
})();<br></script>
</body>
</html>
以上就是本文所述的关于javascript判断CSS3动画结束的方法,希望大家能够喜欢
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、css3动画☺css3动画相对于通过JavaScript动态改变元素样式性能更好,更加容易。CSS3中有三个关于动画的属性:transform、
下面通过图文并茂的方式给大家展示下css3制作变形与动画效果css3制作动画的几个属性:变形(transform),过渡(transition)和动画(anim
1、引子css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的
前言CSS3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候
本文分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也