网页动画结束判断事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>suface js判断css动画是否结束</title>
</head>

<body>

<p>一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持。<br>
http://www.webhek.com/css-animation-callback/ 来源于web骇客</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: .5s;*/
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 type="text/javascript">
(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‘;
}
})();</script>
<br>
</body>
</html>

时间: 2024-10-06 22:12:21

网页动画结束判断事件的相关文章

监听css3动画结束事件-webkitAnimationEnd

当css3的animation完成一个动画,我们想让动画保持在终止的状态或其他一些事件,要怎么做呢 我们可以监听 webkitAnimationEnd 事件就可以 // 动画结束时事件 o.addEventListener("webkitAnimationEnd", function() { console.log("动画结束"); }) -webkit-animation动画有三个事件: 开始事件: webkitAnimationStart结束事件:  webki

原生js判断css动画结束 css 动画结束的回调函数

原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 var transitions = { 'transition':'tra

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd; 注意:transition,也仅仅有这一个事件. http://www.runoob.com/jsref/event-transitionend.html vuejs代码片段: setTimeout(() => { this.wrap.classList.add('swipe-transition'); this.swipeMove(-this.index * this.pageWi

transitionend事件 监听 fadeIn fadeOut 两个方法无效(动画结束时无法执行transitionend里面的代码)

//下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听. //说白了在fadeIn fadeOut 后面监听动画结束时,transitionend是不会执行的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <st

jQuery停止动画和判断是否处于动画状态

1.停止元素的动画 stop([clearQueue][,gotoEnd]); 参数clearQHCHC和gotoEnd都足町选的参数,为Boolean值(ture或flase).clearQueue代表足胥婴清空术执{j.完的动嘶队列,90toEnd代表是否直接将萨在执行的动画跳转到术状态. 如粜商接使川stop()方法.![!IJ会.一即停.l卜专前一在进行的动画,如.粜接下来还有动画等待继续进行.呲0以当前状态J r始接下柬的动画.经常会遇到这种情况.在为.’个元索绑定hover事件之后.

Cocos2d-x 3.2 大富翁游戏项目开发-第二十七部分 技能提升和游戏结束判断

本节主要是增加技能提升事件 和 游戏结束判断,游戏判断简单处理了一下,只要有一个角色资金小于0 ,就认为游戏结束. 如果人物在3个以上,则需要做进一步处理,比如失败方的房屋如何处理,这些在处理到多个角色的时候再做处理. 1.添加提升技能随机事件 oid GameBaseScene::initRandomAskEvent() { ................. randomAskEventMap.insert(STORM_UP_TAG,LanguageString::getInstance()

Unity经验之谈-DoTween动画结束匿名委托之巨坑

产生问题: 成百上千个物体放在List列表里面循环,每个物体都要使用移动和移动结束事件. BUG: 动画结束之后我想隐藏该物体,结果却没有正常的隐藏,代码如下 foreach (var item in lists) { if (item != null) { item .transform.DOLocalMove(AnchorBanker.transform.localPosition, 0.5f).OnComplete(() => { item .gameObject.SetActive(fa

Android 动画监听事件

public class GuideActivity extends Activity { // 显示图片的ImageView组件 private ImageView guidePicture; // 要展示的一组图片资源 private Drawable[] pictures; // 每张展示图片要执行的一组动画效果 private Animation[] animations; // 当前执行的是第几张图片(资源索引) private int currentItem = 0; @Overri

CSS3动画以及animation事件

1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction animation-name:动画名称 animation-name:keyframename|none(keyframename:自定义名字 none:动画无效果) animation-duration:动画执行时间   animation-duration:time(time:秒/毫秒) anima