jquery - CSS 和 jQuery : How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

Question

http://jsfiddle.net/cD4Gr/4/

乐代码:

$j(document).bind('click', function() { 
    $j("#test").css({ bottom:0px })
    });

查看检查器，即使该元素位于页面顶部，它仍然显示其底部值为 0。

也许我需要以某种方式反向播放动画？或者播放不同的动画？ (使用底部％，而不是顶部％)

Answer 1

正如您所想，您可以制作第二个关键帧 block 以将其重置回底部:

@-webkit-keyframes reset_to_bottom {
    0%, 100% {
        top: auto;
        bottom: 0;
        z-index: 1000000;
        opacity: 0.5;
    }
}

然后让你的 jQuery 更改动画名称:

$j("#test").css({
    '-webkit-animation-name': 'reset_to_bottom'
});

jsfiddle

当使用-webkit-animation-fill-mode:forwards;时，forwards将保持最后的关键帧样式，因此top:0%仍然被设置，这就是为什么bottom:0 没有效果

<小时/>

为了好玩...每次点击都在动画之间切换

jsfiddle

$j(document).bind('click', function() {
    if ($j("#test").css('-webkit-animation-name') == "slide_to_top") {
        $j("#test").css({'-webkit-animation-name': 'reset_to_bottom'});
    } else {
        $j("#test").css({'-webkit-animation-name': 'slide_to_top'});
    }
});