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

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 %)

回答1:

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

then have your jQuery change the animation name:

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

jsfiddle

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

回答2:

If I'm understanding the situation correctly, I think these modifications should fix your problem:

CSS:

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

JavaScript:

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

On a side note, I prefer using the jQuery animate() function rather than CSS for animations, mainly because it already has support for all major browsers. That way, I don't have to worry about including multiple CSS styles for different browsers.

来源：https://stackoverflow.com/questions/7932672/css-and-jquery-how-do-i-trigger-the-repositioning-of-a-css3-animated-element-ba

标签

jquery

css

css3

css-animations