CSS3过渡完成时回调

2020/10/16 07:41 · javascript ·  · 0评论

我想淡出一个元素(将其不透明度转换为0),然后在完成后从DOM中删除该元素。

在jQuery中,这很简单,因为您可以指定动画完成后要执行的“删除”。但是,如果我希望使用CSS3过渡进行动画处理,是否可以知道过渡/动画何时完成?

对于过渡,您可以使用以下内容通过jQuery检测过渡的结束:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla具有出色的参考:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

对于动画,它非常相似:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

请注意,您可以将所有浏览器前缀的事件字符串同时传递到bind()方法中,以在所有支持该事件的浏览器上支持事件触发。

更新:

根据Duck留下的评论:您使用jQuery的.one()方法来确保处理程序仅触发一次。例如:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

更新2:

jQuerybind()方法已被弃用,从开始,on()最好使用method方法jQuery 1.7bind()

您还可以off()在回调函数上使用method,以确保仅将其触发一次。这是一个等效于usingone()方法的示例

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

参考文献:

有一个animationend可以观察到事件,请参见此处的文档,对于csstransition动画,您也可以使用该transitionend事件

不需要额外的库,这些库都可以与Vanilla JS一起使用

document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
	this.innerHTML = "transition event ended";
}
#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}
<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>

另一个选择是使用jQuery Transit Framework处理CSS3过渡。过渡/效果在移动设备上的效果很好,您不必在CSS文件中添加一行凌乱的CSS3过渡即可制作动画效果。

这是一个示例,它将在您单击元素时将其不透明度转换为0,并在转换完成后将其移除:

$("#element").click( function () {
    $('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});

JS小提琴演示

对于可能方便使用的任何人,这是我成功使用jQuery的函数,该函数可通过CSS类应用CSS动画,然后从其后获取回调。自从我在Backbone.js应用程序中使用它以来,它可能无法完美运行,但可能很有用。

var cssAnimate = function(cssClass, callback) {
    var self = this;

    // Checks if correct animation has ended
    var setAnimationListener = function() {
        self.one(
            "webkitAnimationEnd oanimationend msAnimationEnd animationend",
            function(e) {
                if(
                    e.originalEvent.animationName == cssClass &&
                    e.target === e.currentTarget
                ) {
                    callback();
                } else {
                    setAnimationListener();
                }
            }
        );
    }

    self.addClass(cssClass);
    setAnimationListener();
}

我有点像这样

cssAnimate.call($("#something"), "fadeIn", function() {
    console.log("Animation is complete");
    // Remove animation class name?
});

最初的想法来自http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

这似乎很方便:http : //api.jqueryui.com/addClass/


更新资料

在尝试了上面的代码和其他选项之后,我建议在收听CSS动画结束时要非常谨慎。随着多个动画的进行,对于事件监听而言,这可能会很快变得混乱。我强烈建议为每个动画,甚至是小的动画,都提供一个像GSAP这样的动画库

目前,对于Chrome中的动画,已接受的答案会触发两次。大概是因为它识别webkitAnimationEndanimationEnd以下内容肯定只会触发一次:

/* From Modernizr */
function whichTransitionEvent(){

    var el = document.createElement('fakeelement');
    var transitions = {
        'animation':'animationend',
        'OAnimation':'oAnimationEnd',
        'MSAnimation':'MSAnimationEnd',
        'WebkitAnimation':'webkitAnimationEnd'
    };

    for(var t in transitions){
        if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

$("#elementToListenTo")
    .on(whichTransitionEvent(),
        function(e){
            console.log('Transition complete!  This is the callback!');
            $(this).off(e);
        });
本文地址:http://javascript.askforanswer.com/css3guoduwanchengshihuidiao.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!