JQuery is facing difficulty in animating a div following the completion of a "forwards" css animation

Question

JQuery is facing difficulty in animating a div following the completion of a "forwards" css animation

Check out this example: http://jsfiddle.net/nxsv5dgw/

A div appears on the stage and a CSS animation is applied to it. However, when attempting to use JQuery to animate the same properties that were animated by CSS, it seems to no longer work properly.

In the provided example, a CSS animation adjusts the width of a box. When clicking on the box, a JQuery animation is supposed to shrink both the width and height, but only the height changes. Here's the code snippet:

$(".a").click(function(e) {
  $(this).animate({
    width: "-=100px", // does not 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 a way to work around this issue? I would prefer to avoid performing all animations using JQuery if possible.

javascript jquery html css animation

Answer 1

Answer №1

Tested and optimized for Firefox, I have made adjustments to your Fiddle by including the following code:

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

This code snippet sets the width to its actual value and disables the animation. However, I acknowledge that there might be a more elegant solution rather than this workaround.

Update - confirmed to also work on Safari and IE browsers.

Answer 2

Tested and optimized for Firefox, I have made adjustments to your Fiddle by including the following code:

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

This code snippet sets the width to its actual value and disables the animation. However, I acknowledge that there might be a more elegant solution rather than this workaround.

Update - confirmed to also work on Safari and IE browsers.

Answer 3

Answer №2

After the animation finishes, you can specify a width of 500px for the DOM element so that it recognizes the DIV as having a width of 500px, and then remove the CSS animation from the 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);
    });
});

Idea: To prevent conflicts between CSS animation and jQuery animation, it is best to trigger the jQuery animation only after the CSS animation has finished by using the

animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd

event. Also, make sure to revert any CSS animation rules and remove the animation from the element.

See Working Example Here

Answer 4

After the animation finishes, you can specify a width of 500px for the DOM element so that it recognizes the DIV as having a width of 500px, and then remove the CSS animation from the 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);
    });
});

Idea: To prevent conflicts between CSS animation and jQuery animation, it is best to trigger the jQuery animation only after the CSS animation has finished by using the

animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd

event. Also, make sure to revert any CSS animation rules and remove the animation from the element.

See Working Example Here

Answer 5

Answer №3

When it comes to animation, the use of forward is crucial.

Referencing the CSS Animations Working Draft

The CSS Animations have a significant impact on computed property values. Throughout an animation's execution, the computed value for a property is under the control of the animation itself. This takes precedence over the value specified in the regular styling system. While animations override standard rules, they can be overridden by !important rules.

Additionally, looking at Animation Duration

[…] An animation that fills forwards will maintain the value assigned at the 100% keyframe, even if the animation was immediate. In addition, animation events continue to be triggered.

By default, this cannot be overridden, with the exception of !important rules. Nevertheless, achieving this with jQuery.animate() is not feasible.

If possible, I would prefer to minimize the utilization of JQuery for all animations.

Unfortunately, it seems unavoidable.

A potential jQuery approach could be:

$(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 6

When it comes to animation, the use of forward is crucial.

Referencing the CSS Animations Working Draft

The CSS Animations have a significant impact on computed property values. Throughout an animation's execution, the computed value for a property is under the control of the animation itself. This takes precedence over the value specified in the regular styling system. While animations override standard rules, they can be overridden by !important rules.

Additionally, looking at Animation Duration

[…] An animation that fills forwards will maintain the value assigned at the 100% keyframe, even if the animation was immediate. In addition, animation events continue to be triggered.

By default, this cannot be overridden, with the exception of !important rules. Nevertheless, achieving this with jQuery.animate() is not feasible.

If possible, I would prefer to minimize the utilization of JQuery for all animations.

Unfortunately, it seems unavoidable.

A potential jQuery approach could be:

$(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 7

Answer №4

It may not be the exact solution you're looking for, but consider this alternative approach.

The issue seems to stem from how animations take precedence over normal rules, unless overridden by !important rules ()

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

One potential workaround is to animate the scale transform instead. This way, you avoid changing properties affected by the animation. Although jQuery does not directly support this, you can achieve it with a plugin like this one: https://github.com/rstacruz/jquery.transit.

This method also offers a significant performance improvement compared to animating width and height, as detailed here: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Keep in mind that scaling down the div will also shrink its contents, which might not be the desired outcome.

You can view a demo showcasing this technique here: http://jsfiddle.net/nxsv5dgw/13/

Here's the code snippet:

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

Answer 8

It may not be the exact solution you're looking for, but consider this alternative approach.

The issue seems to stem from how animations take precedence over normal rules, unless overridden by !important rules ()

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

One potential workaround is to animate the scale transform instead. This way, you avoid changing properties affected by the animation. Although jQuery does not directly support this, you can achieve it with a plugin like this one: https://github.com/rstacruz/jquery.transit.

This method also offers a significant performance improvement compared to animating width and height, as detailed here: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Keep in mind that scaling down the div will also shrink its contents, which might not be the desired outcome.

You can view a demo showcasing this technique here: http://jsfiddle.net/nxsv5dgw/13/

Here's the code snippet:

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

JQuery is facing difficulty in animating a div following the completion of a "forwards" css animation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Disabling an HTML attribute on a button prevents the ability to click on it

Display a dialogue box when encountering a Vuetify error. Only open the dialogue box under certain conditions

Ways to incorporate bold, unbold, and italic styles into a single heading text within the same line using Bootstrap 4

Create a personalized Command Line Interface for the installation of npm dependencies

This code is only functional on JSFiddle platform

Padding on a flex item nudges a neighboring flex item out of place

What is the best method for exporting a MapboxGL map?

How can I make <p> elements change color when scrolling?

Save the function as a local variable and preserve the reference to the current object

What is the best way to ensure my fetchMovieDescription function is executed only after the story state has been updated?

The communication hub in a Vue.js application

A platform for creating ER and flow diagrams specifically tailored for web applications, utilizing open source software

How to troubleshoot an Ionic exception occurring during the execution of any Ionic command?

CSS styling for a background image in the header

Create your own unique Semantic UI themes using the Semantic UI theme builder, complete with support for Font Awesome classnames and the ability to preview them with the

Encountering a problem with configuring webpack's CommonsChunkPlugin for multiple entry points

Checking the list box and radio button using JavaScript based on their respective IDs

Utilizing v-model dynamically to showcase the outcomes of a specific property within a v-for iteration

Navigating in AngularJS with various URL parameters

Exploring MapQuest API: Unraveling the process of dissecting MapQuest