悬停时添加/删除类-并非始终有效

Question

我通过在mouseover和mouseout上向元素添加和删除类来实现一些动画。 我使用这种方法是因为我发现仅使用CSS是不可靠的； 如果鼠标在动画完成之前退出元素，则动画将无法完成。

所以我有以下代码：

<div class="one flip-container">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

<script>
    jQuery(".flip-container").hover(function () {
        jQuery(this).addClass("hover");
    },function () {
        jQuery(this).delay(2000).queue(function(){
            jQuery(this).removeClass("hover");
        });
    });
</script>

<style>
    .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

    .flipper {
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative;
    }
</style>

这可以工作，但是有时类“ hover”没有被删除，而是保留下来，使元素保持其动画状态。 知道如何使它更可靠吗？

Answer 1

尝试使用mouseenter，然后设置超时功能以您将不会添加和删除类的方式删除类，除非每次鼠标进入该区域一次。 另外，您可能想检查该区域是否已经有该类，以免该函数被执行太多次，如下所示：

jQuery(".flip-container").mouseenter(function () {
    var el = jQuery(this);
    if(!el.hasClass("hover")){
        el.addClass("hover");
        setTimeout(function(){ 
            el.removeClass("hover");
        }, 2000);
    }
});

这是一个正在工作的小提琴小提琴演示