jquery - Css 和 jQuery：如何触发将 CSS3 动画元素重新定位到动画之前的位置？

Question

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

乐代码：

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

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

也许我需要以某种方式反向播放动画？或播放不同的动画？（使用底部百分比，而不是顶部百分比）

Answer 1

正如您所想的那样，您可以制作第二个关键帧块将其重置回底部：

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

Answer 2

如果我正确理解情况，我认为这些修改应该可以解决您的问题：

CSS：

#test {
  ...
  //bottom: 0px; //Remove this line
  top:100%;      //Replace with this
  ...
}

JavaScript：

//$j("#test").css({ bottom:0px })
$j("#test").css({ top:0 })

附带说明一下，我更喜欢使用 jQueryanimate()函数而不是 CSS 来制作动画，主要是因为它已经支持所有主流浏览器。这样，我就不必担心为不同的浏览器包含多种 CSS 样式。