jQuery“前进” css动画后无法为div制作动画

Question

See example http://jsfiddle.net/nxsv5dgw/

Div appears on stage, a "forwards" animation occurs on it, JQuery can apparently no longer "animate" the properties that were animated.

In the example, a css animation plays on the width of a box. OnClick, a JQuery animation tries to shrink the width and height of the box, but only the height is changed. Here's the code.

$(".a").click(function(e) {
  $(this).animate({
    width: "-=100px", // doesn't work after CSS animation
    height: "-=100px",
  }, 400); 
})

.a {
  background:red;
  position:absolute;
  height:500px;
  width:600px;
  animation: anim 0.4s forwards 1s;
}

@keyframes anim {
  0% {width:600px;}
  100% {width:500px;}
}

Is there any way to circumvent this? I'd rather avoid doing all animations in JQuery if possible.

Answer 1

Only tested for Firefox, but working - I've adjusted your Fiddle adding

$(this).css({
    "width": $(this).width(),
    "animation": "none"
});

to the click-function. This sets the width to the actual width and overrides the animation, but I think there could be a better solution as it looks like a hack.

Update - also working for Safari and IE.

Answer 2

Actually you can set the width to 500px after the animation is complete so that DOM element knows that DIV has width 500px and remove the css animation from Element.

$(".a").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
    $(this).width(500);
    $(this).css({
            "animation": "none"
        });
    $(".a").click(function (e) {
        $(this).animate({
            width: "-=100px",
            height: "-=100px",
        }, 400);
    });
});

Basic Idea: To avoid conflicting between CSS animation and jQuery animation one should call the jQuery animation only when CSS animation is completed by using animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd event and by undoing the rules overriden by CSS animation and removing animation from the element.

Working Fiddle

Answer 3

As you said, this happens by using forward in animation.

From the CSS Animations Working Draft

CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules.

and Animation Duration

[…] and an animation that fills forwards will retain the value specified at the 100% keyframe, even if the animation was instantaneous. Also, animation events are still fired.

So, it cannot be overriden by default, except for !important rules. But this cannot be done using jQuery.animate()

I'd rather avoid doing all animations in JQuery if possible.

I guess that you can't.

You could use a jQuery solution:

 $(document).ready(function() { $('.a').delay(1000).animate({ width: "-=100px" }, 400); }); $(".a").click(function(e) { $(this).animate({ width: "-=100px", // doesn't work after CSS animation height: "-=100px", }, 400); }) 

 .a { background:red; position:absolute; height:500px; width:600px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="a"></div> 

Answer 4

I'm not sure if this is an option, as the effect is slightly different then what you are aiming for, but I just wanted to put it out there as an alternative.

The problem is clearly caused by the fact that ( http://w3.org/TR/css3-animations/#animations )

Animations override all normal rules, but are overriden by !important rules

Therefore you could try to animate the scale transform in stead. This way you are not altering the properties that have been set trough the animation. jQuery does not support it out of the box, but this plugin adds the functionality: https://github.com/rstacruz/jquery.transit .

This also has the huge added advantage of being much better for performance then animating your width an height, as very well explained here: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

The drawback of this method is that the contents of your div is scaled down as well , which may not be the desired effect.

I've set up a demo to demonstrate: http://jsfiddle.net/nxsv5dgw/13/

And the code:

$(".a").click(function (e) {
    $(this).transition({
        scale: '-=0.1'
    }, 4000);
});