好的，我有一种情况，我基本上构建了一个小的通知下拉框，当用户做某事时发生，最后它转换为 opacity: 0;状态。

但是，由于用户可能会单击其他会再次触发此通知框的内容，因此我试图想出一种方法将其重置为正常状态，而不会影响任何正在进行的转换，并尝试使动画由 CSS 而不是 JavaScript 完成.

代码笔: http://codepen.io/gutterboy/pen/WoEydg

HTML:

<a href="#">Open Notify Window</a>

<div id="top_notify" class="top-notify">
    <div class="container-fluid">
        <div class="row">
            <div class="content col-xs-12">
                <div class="alert" role="alert"></div>
            </div>
        </div>
    </div>
</div>

body {
    text-align: center;
    padding-top: 150px;
}

.top-notify {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;

    .content {
        text-align: center;
        background-color: transparent;
        transform-style: preserve-3d;
    }

    .alert {
        display: inline-block;
        transform: translateY(-100%);
        min-width: 250px;
        max-width: 500px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        &.visible {
            transform: translateY(0%);
            transition: 0.8s 0s, opacity 1s 3.8s;
            opacity: 0;
        }

    }

}

$('a').on('click', function(e){
    e.preventDefault();
    myFunc();
});

function myFunc() {

    // Set file to prepare our data
    var loadUrl = "https://crossorigin.me/http://codepen.io/gutterboy/pen/ObjExz.html";

    // Run request

    getAjaxData(loadUrl, null, 'POST', 'html')

            .done(function(response) {

                var alert_el = $('#top_notify').find('.alert');

                // Update msg in alert box
                alert_el.text(response);
                alert_el.addClass('alert-success');

                // Slide in alert box
                alert_el.addClass('visible');

            })

            .fail(function() {
                alert('Problem!!');
            });

    // End

}

function getAjaxData(loadUrl, dataObject, action, type) {

    return jQuery.ajax({
        type: action,
        url: loadUrl,
        data: dataObject,
        dataType: type
    });

}

$('#top_notify').find('.alert').removeClass().addClass('alert'); // The classes it ends up with vary

最佳答案

好吧，我想出了一个令人费解的一哈之后，想出了一个简单的解决方案。

我应该首先想到的简单解决方案是在 ajax 之前删除任何额外添加的类。称呼;我太专注于在 ajax 内做这件事阻止，当然那没有用，但是直到我开始尝试其他解决方案之前，我从未尝试过。

无论如何，简单的解决方案就是简单地移动这段代码:

 var alert_el = $('#top_notify').find('.alert');

alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning');

function myFunc() {

    // Set file to prepare our data
    var loadUrl = "https://crossorigin.me/http://codepen.io/gutterboy/pen/ObjExz.html";

    var alert_el = $('#top_notify').find('.alert');

    alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning');

    // Run request

    getAjaxData(loadUrl, null, 'POST', 'html')

            .done(function(response) {

                // Update msg in alert box
                alert_el.text(response);
                alert_el.addClass('alert-success');

                // Slide in alert box
                alert_el.addClass('visible');

            })

            .fail(function() {
                alert('Problem!!');
            });

    // End

}

&.visible {
    animation: slideDown 0.8s 0s, keepThere 3s 0.8s, fadeAway 1s 3.8s;
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes keepThere {
    0%, 100% {
        transform: translateY(0%);
    }
}

@keyframes fadeAway {
    0%, 100% {
        transform: translateY(0%);
    }
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.top-notify {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;

    .content {
        text-align: center;
        background-color: transparent;
        transform-style: preserve-3d;
    }

    .alert {
        display: inline-block;
        transform: translateY(-100%);
        min-width: 250px;
        max-width: 500px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        &.visible {
            animation: slideDown 0.8s 0s, keepThere 3s 0.8s, fadeAway 1s 3.8s;
        }

    }

}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes keepThere {
    0%, 100% {
        transform: translateY(0%);
    }
}

@keyframes fadeAway {
    0%, 100% {
        transform: translateY(0%);
    }
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

关于javascript - 从元素中删除类而不影响正在进行的 css 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40831805/