Issue with ng-animate not functioning properly when used alongside animate.css

Question

Issue with ng-animate not functioning properly when used alongside animate.css

I attempted to integrate animation into my app by following this specific tutorial, but for some mysterious reason, I am unable to achieve the desired results. Here is the link to the Plunker I created.

This is how I have included the ng-animate attribute:

<li ng-repeat="item in items" class="{enter:'animated bounceIn',leave:'animated bounceOut'}">{{item}}</li>

Note: My implementation utilizes animate.css.

If anyone could help identify where I may be going astray, it would be greatly appreciated. Thank you!

javascript css angularjs animation animate.css

Answer 1

Answer №1

The reason your animations are not functioning is due to Angular assigning specific classes to elements for the purposes of animations, such as ng-enter, ng-leave, and so on. Thus, it is necessary to connect these classes with the animations:

For instance:

<style>
li.ng-enter {
-webkit-animation: bounceIn 0.5s;
animation: bounceIn 0.5s;
}
li.ng-leave {
-webkit-animation: bounceOut 0.5s;
animation: bounceOut 0.5s;
}
</style>

Somewhere in your HTML:

<li ng-repeat="item in items">{{item}}</li>

See the demo: http://plnkr.co/edit/c8uvhQXtXgdfsEHRo9P6?p=preview

The Angular documentation provides a list of the classes it utilizes.

Answer 2

The reason your animations are not functioning is due to Angular assigning specific classes to elements for the purposes of animations, such as ng-enter, ng-leave, and so on. Thus, it is necessary to connect these classes with the animations:

For instance:

<style>
li.ng-enter {
-webkit-animation: bounceIn 0.5s;
animation: bounceIn 0.5s;
}
li.ng-leave {
-webkit-animation: bounceOut 0.5s;
animation: bounceOut 0.5s;
}
</style>

Somewhere in your HTML:

<li ng-repeat="item in items">{{item}}</li>

See the demo: http://plnkr.co/edit/c8uvhQXtXgdfsEHRo9P6?p=preview

The Angular documentation provides a list of the classes it utilizes.

Issue with ng-animate not functioning properly when used alongside animate.css

Answer №1

Similar questions

Unable to retrieve PHP data using AJAX

Strings holding special arrangements of breaks in between

Ways to toggle the visibility of identical sections within corresponding sections using JQuery

What are some ways to detect if JavaScript is enabled on the client side?

Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the

What is the best way to apply a :visited selector specifically to the most recently visited webpage?

Fetching json data from the request in Node.js

What is the best way to implement a required input field in Vue.js?

Troubleshooting a Simple Angular Js Program: Uncovering the System Not Defined Error

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

The second AJAX request is unloading the outcome of the initial one

problem encountered while running the npm run watch command

Ensure that the heading cells in the table header (thead) are properly

Combine elements in an array based on their values and calculate the occurrences of each

What is the new Bootstrap equivalent for btn-group-justify?

What is the best way to utilize JavaScript variables that are declared on index.html/index.jsp in Vue.js?

How do I make the dropdown menu in a navbar stretch horizontally to cover the entire width of the page container?

Eliminated the right margin for desktop display

Retrieve the text content of a datalist option by accessing the label with jQuery

What is the best way to align my text to the top of a div, rather than the bottom?