Css和jQuery：我如何触发CSS3动画元素重新定位回动画之前的位置？ [英] Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

问题描述

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

Le Code：

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

查看检查器，即使元素位于页面顶部，底值为0。

Looking in the inspector, even when the element is at the top of the page, it still says it's bottom value is 0.

也许我需要以相反的方式播放动画吗？或播放不同的动画？ （使用底部％，而不是顶部％）

Maybe I need to play the animation in reverse somehow? or play a different animation? (Using Bottom %, rather than top %)

推荐答案

正如你以为你可以让第二个关键帧块重置到底部：

As you were thinking you can make a second keyframe block to reset it back to the bottom:

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

然后让jQuery更改动画名称： p>

then have your jQuery change the animation name:

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

jsfiddle

使用 -webkit-animation-fill-mode：forward; 将保持最后的关键帧样式，因此 top：0％仍然设置，这是为什么 bottom：0 效果

When using -webkit-animation-fill-mode: forwards; forwards will maintain the last keyframe styles, so top:0% is still set which is why bottom:0 was having no effect

有趣...在动画的每次点击之间切换

for fun...switch between animation's each click

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'});
    }
});

这篇关于Css和jQuery：我如何触发CSS3动画元素重新定位回动画之前的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！