css - 在动画之后转换属性

Question

我有一个元素在添加到页面时从左侧进入(来自 XHR 调用):

.flyin:not(.animation_done) {
    -webkit-animation: flyin .5s ease forwards;

    margin-left: -210px;
    opacity: 0;
}

@-webkit-keyframes flyin {
    to { 
        margin-left: 0;
        opacity: 1;
    }
}

但我想在鼠标悬停时为 margin-left 属性设置动画:

.element_im_animating.animation_done {
    margin-left: 0;
    transition: margin-left .4s ease;
}

.element_im_animating.mod.animation_done:hover {
    margin-left: 10px;
}

为了实现这一点，我在动画结束时添加了一个类:

$(document).on("animationend webkitAnimationEnd", function(e) {
    $(e.target).addClass("animation_done");
});

奇怪的是，添加 animation_done 会在完成后立即触发 flyin 动画第二次。我能阻止这一切发生吗？有没有更简单的非 JavaScript 方法来完成我需要做的事情？谢谢!

Answer 1

动画第二次没有运行。

实际情况如下:

您的元素的边距设置如下:

.flyin:not(.animation_done) {
    margin-left: -210px;
}

因此动画的结尾有一个 0px 的 margin-left

.flyin:not(.animation_done) {
    -webkit-animation: flyin 5s ease forwards;
}

@-webkit-keyframes flyin {
    to { 
        margin-left: 0px;
    }
}

当您移除动画时，不再应用上面的 forwards 规则，边距现在是默认值 (-210px)。由于此属性是transitioned(不是动画!)，它将移动到新值:

.animation_done {
    margin-left: 0px;
}

以类似于动画的方式。解决这个问题，将 base margin 设置为最后一个，而不是使用 forwards

.flyin:not(.animation_done) {
    -webkit-animation: flyin 5s ease;

    margin-left: 0px;
    opacity: 0;
}

@-webkit-keyframes flyin {
    from { 
        margin-left: -210px;
        opacity: 1;
    }
    to { 
        margin-left: 0px;
        opacity: 1;
    }
}

.animation_done {
    margin-left: 0px;
    transition: margin-left 4s ease;
}

.animation_done:hover {
    margin-left: 10px;
}

fiddle