ngAnimate removeClass behaving unexpectedly

Question

ngAnimate removeClass behaving unexpectedly

Recently, I've been delving into the ngAnimate module for AngularJS version 1.2.14

When employing $animate.addClass, everything seems to function as expected with the ng-animate, -add, and -add-active classes seamlessly added.

However, my struggle arises when trying to utilize $animate.removeClass, which appears to only execute an elem.removeClass equivalent. This results in none of the animation classes being applied during removal, like ng-animate, -remove, or -remove-active.

To illustrate this issue, I have created a plunkr that showcases the problem:

http://plnkr.co/edit/DIQSthOFxooVDSqO2KKQ?p=preview

Although I can manually code the removal methods, my preference would be to rely on the Animate directive.

javascript angularjs css ng-animate

Answer 1

Answer №1

To ensure proper animation, it is important to define the transition on the element's class itself rather than on the class being added or animated.

This allows $animate to recognize that a transition has been applied to the class and animate accordingly. Otherwise, adding or removing classes would all occur simultaneously without any animation taking place.

For more information, please refer to this example

CSS Classes:

.classname {
  /* The class of the element you want to animate */
  /* Its default state (invisible). */
}

.classname.visible-class-add {
  /* Any preparation needed before animating */
  /* This is where the transition property should be defined. */
}

.classname.visible-class-add-active{
  /* Additional styling during animation (may not always be necessary) */
}

.classname.visible-class-remove {
  /* Preparation for removal, possibly same as .visible-class-add */
}

.classname.visible-class-remove-active {
  /* Style changes during removal animation (usually not required) */
}

.classname.visible-class {
  /* The visible state after animation. */
}

Answer 2

To ensure proper animation, it is important to define the transition on the element's class itself rather than on the class being added or animated.

This allows $animate to recognize that a transition has been applied to the class and animate accordingly. Otherwise, adding or removing classes would all occur simultaneously without any animation taking place.

For more information, please refer to this example

CSS Classes:

.classname {
  /* The class of the element you want to animate */
  /* Its default state (invisible). */
}

.classname.visible-class-add {
  /* Any preparation needed before animating */
  /* This is where the transition property should be defined. */
}

.classname.visible-class-add-active{
  /* Additional styling during animation (may not always be necessary) */
}

.classname.visible-class-remove {
  /* Preparation for removal, possibly same as .visible-class-add */
}

.classname.visible-class-remove-active {
  /* Style changes during removal animation (usually not required) */
}

.classname.visible-class {
  /* The visible state after animation. */
}

ngAnimate removeClass behaving unexpectedly

Answer №1

Similar questions

How can CSS be used to make an element completely move off the visible screen?

Tips for adjusting the font size of choices within the Material UI autocomplete component

JavaScript dynamic onclick method not functioning as expected

Guide on using jQuery to dynamically update a section of an ejs template following an AJAX request in ExpressJS

What is the proper way to select the <ul> element within an FTL template?

Error message encountered in Quagga JavaScript barcode scanner: "Uncaught TypeError: Quagga.init is not defined."

What is the method for obtaining the angle in a CSS3 rotate transformation?

PHP unable to execute Javascript alert box

The output from a spawned process behaves oddly when it is being piped

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

How can I correct the error in accessing state data with a getter and displaying the outcome in a component?

Using hooks for conditional rendering

Verify the presence of an email in the database utilizing a custom express-validator for node, express, and mysql

Angular Directive for bootstrap-wysihtml5 not updating properly after changes

Guide to repositioning elements and fixing the functionality of the hamburger button: [ HTML & Bootstrap ]

When opening a dialog at the bottom of the page, the window will automatically scroll to the top

The Model.findById() function is producing an undefined result

Ensuring a div remains perfectly centered

Encountering an issue with core.js:15723 showing ERROR TypeError: Unable to access property 'toLowerCase' of an undefined value while using Angular 7

Enhancing game menus for various mobile screen sizes