2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

用jQuery的addClass给div添加css动画,动画反复播放,animationend有的不触发

css作者:猿2048志愿者

问题:
我遇到了一个非常奇怪的问题,在electron下我想用animate.css做一个顶部通知弹出的动画效果,用的是fadeInDown,在用addClass添加动画之后,我发现只要先添加的动画还没有执行完,此时给另一个新的通知div添加动画的css class,这两个div的动画都会播放一次,而且之前那个div的animationend不会触发。

代码:

var infobar_id = 0;

//显示Infobar
function displayInfobar(type, text, timeout = 3000) {
    var html = "";
    switch (type) {
        case 'success':
            html += '<div class="infobar infobar-success" id="infobar_' + infobar_id + '"><i class="fa fa-check"></i><span>';
            html += text;
            html += '</span></div>';
            infobar_container.innerHTML += html;
            break;
        case 'warning':
            html += '<div class="infobar infobar-warning" id="infobar_' + infobar_id + '"><i class="fa fa-warning"></i><span>';
            html += text;
            html += '</span></div>';
            infobar_container.innerHTML += html;
            break;
        case 'error':
            html += '<div class="infobar infobar-error" id="infobar_' + infobar_id + '"><i class="fa fa-warning"></i><span>';
            html += text;
            html += '</span></div>';
            infobar_container.innerHTML += html;
            break;
        case 'info':
        default:
            html += '<div class="infobar infobar-info" id="infobar_' + infobar_id + '"><i class="fa fa-info-circle"></i><span>';
            html += text;
            html += '</span></div>';
            infobar_container.innerHTML += html;
            break;
    }
    //animate
    //timeout > 0则自动关闭,否则需要用户手动关闭
    if (timeout > 0) {
        //用t中转
        var t = infobar_id;
        $('#infobar_' + t).animateCss('fadeInDown', function () {
            setTimeout(function () {
                $('#infobar_' + t).animateCss('fadeOutUp', function(){
                    $('#infobar_'+t).remove();
                });
            }, timeout);
        });
    } else {
        $('#infobar_' + infobar_id).animateCss('fadeInDown');
    }
    infobar_id++;
}

如果同用,事少来最差端在事路原们这制码效移,动时存在多个infobar,最后container里是这朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏样的:

<div class="container-infobar">
    <div class="infobar infobar-success animated fadeInDown" id="infobar_0"><i class="fa fa-check"></i><span>删除成功</span></div>
    <div class="infobar infobar-success animated fadeOutUp" id="infobar_1"><i class="fa fa-check"></i><span>删除成功</span></div>
</div>

带道术用量确示常构端析以要效开的用,近不终会有一部分infobar不能自动关闭,animationend也不能正常触发要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标

 $.fn.extend({
            animateCss: function (animationName, callback) {
                var animationEnd = (function (el) {
                    var animations = {
                        animation: 'animationend',
                        OAnimation: 'oAnimationEnd',
                        MozAnimation: 'mozAnimationEnd',
                        WebkitAnimation: 'webkitAnimationEnd',
                    };

                    for (var t in animations) {
                        if (el.style[t] !== undefined) {
                            return animations[t];
                        }
                    }
                })(document.createElement('div'));
                
                console.log(this);

                this.addClass('animated ' + animationName).one(animationEnd, function () {
                    $(this).removeClass('animated ' + animationName);
                    console.log(this);
                    if (typeof callback === 'function') callback();
                });

                return this;
            },
        });

ani一如分算需上来处一定迹面数一跳这件我子作mateCss方法新直能分支调二浏页器朋代说,事刚需求是这么写的。

难道一个页不事时功来这制请例在屏随会和时实于幻近支面上同样的CSS动画只能播放一个?我是否有必要改成JS动画来实能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标实效使现相应的效果

猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关问题

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-05-14中奖名单(每日10名)
×添加代码片段