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左边距

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

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

删除动画时，不再应用上面的前进规则，边距现在是默认值（-210像素）。由于此属性已过渡（未设置动画！），因此它将移至新值：

.animation_done {
    margin-left: 0px;
}

以类似于动画的方式。解决它将基本边距设置为最终边距，而不是使用前进

.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

在动画制作后转换属性

1 个答案: