The animation only applies to the initial item in ngRepeat

After implementing async data loading in my application, I noticed that NgRepeat only animates the first element in an array.

Check out the example on jsFiddle

Here is the HTML code snippet:

<div ng-repeat="x in data"></div>

And here is the CSS code snippet:

.box.ng-enter {
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    opacity: 0;
    top: 20px;
}

.box.ng-enter-stagger {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.box.ng-enter.ng-enter-active {
    opacity: 1;
    top: 0;
}

Within this particular example, I utilized $timeout to simulate an async data source. However, I encountered the issue of only the first element being animated.

Can anyone shed some light on why this may be happening?

Thank you!

Answer №1

It seems like there was a bug in the earlier version of the animate module, but it has been resolved with the latest updates. Many changes have been made to the animate module since the 1.2.* release.

You can check out this JsFiddle with the most recent source code from git for the animate module embedded, and the issue should no longer be present. If you require this functionality, it is recommended to load your own version of the animate module using the latest source.

You can compare the changes between the 1.2.* branch and the master branch by looking at "src/ngAnimate/animate.js" to see all the updates to the module.

Just a note - I needed to include the fiddle link to make it work. While I understand the importance of providing code alongside a fiddle, in this instance, it doesn't add much value. The only change made was adding 1600 lines of code from the latest module version. I've omitted that here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on dividing a div into two separate pages when converting to PDF

I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...

Encountered an error injecting 'ngStorage' following the inclusion of the ngStorage file

For this code snippet, I've made sure to include the line that utilizes ngStorage <script src="js/angularjs/ngStorage.min.js"></script> Furthermore, I have injected it into my controller named bookController as is customary .controller( ...

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Upon creating a new BrowserWindow and utilizing loadURL to incorporate an html file within the renderer, there is a brief instance where unstyled content is displayed for approximately half a second before the css is loaded. window.loadURL('file://&a ...

How to use jQuery to remove a class from the last entered data in a form

Reminder: This is a jQuery coding challenge, and I am required to write the validation script without using any plugins or additional modules. I have created a basic form validation script. If a user inputs data that is empty, an appropriate error message ...

Why does my function consistently notify me that my answer is incorrect?

I've created a fun Pi quiz function that awards half a point for each correct digit you type. However, even if I enter just '3', it always shows as incorrect. Can someone assist me with this issue? function pi() { var piWithoutDecimals ...

Attempting to retrieve the value from a nested table within a table row using Jquery

<tr role="row" class="odd"> <td style="background-color:white"> <table> <tbody> <tr data-row-id="22"> <td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22">< ...

Comparison of Fabric JS Filters and CSS Filters

We are currently in the process of transitioning a project from HTML and CSS to Fabric JS. This project allows users to manipulate images by moving them around and applying filters. In our current HTML/CSS implementation, we handle image positioning with C ...

jQuery sliding tabs

Hello everyone! I am currently on the search for a specific slider, and I'm hoping to find a good example of it similar to what is demonstrated HERE. Unfortunately, I do not know the official name of this particular type of slider, making it challengi ...

Ways to refine data using multiple criteria

I have a list of alarm data that I need to filter based on specific conditions. If there are multiple alarms of type "pull_Alarm" and "emergency_alarm" in the same location, I want to prioritize the "emergency_alarm". Here is my list: [ { ...

Inserting duplicate rows from CSV using JavaScript

Currently, I am utilizing Papaparse to sum up rows with duplicate SKUs in my CSV file. I'm striving to achieve this task without the use of additional JS libraries such as D3. Here is a snippet of how my CSV data is structured: SKU,Daily total,Weekly ...

Retrieving variables using closures in Node.js

I have been developing thesis software that involves retrieving variables within closures. Below is the code snippet written in node.js: var kepala = express.basicAuth(authentikasi); // authentication for login function authentikasi(user, pass, callback ...

The functionality of jQuery typeahead ceases to perform after I choose an option from the dropdown menu

Initially, my jQuery typeahead autocomplete function works perfectly. However, after selecting an option from the list, it fails to show results when I try to use it again by typing in the input field. It seems like the typeahead functionality gets destro ...

Apply the "ng-class" directive only if there is an <a> element located after the specified element

My issue involves a list of items categorized by labels, with a search filter applied. The problem arises when the labels appear in the search results even though the lists themselves are empty. I need to hide the relevant label if there are no items prese ...

Deliver a response to recipients through the "button" feature within the WhatsApp cloud API

I'm working on building a chatbot for my booking company. Here is an outline of my initial bot flow: const axios = require("axios").default; function initialize_bot(message, phone_number, access_token, sender, username) { if (message === ...

Developing versatile form elements with Formik and the Yup library for React and Vite

I'm currently working on a React and Vite project where I'm trying to implement reusable form components using Formik and Yup, but I haven't been able to achieve it yet. I've created a component called <AppInputField/>, which is e ...

I encountered an issue while operating my next.js application which utilizes solidity smart contracts. The error message "Cannot read properties of undefined" was displayed during the process

While working on my next.js app and attempting to fetch user data, I encountered the "cannot read properties of undefined" error. https://i.stack.imgur.com/SBPBf.png I also received the following error in the console https://i.stack.imgur.com/JBtbO.png ...

Implementing ExpressJS with MongoDB on a MERN Development Stack

After configuring my ExpressJS & MongoDB client and running Nodemon, I consistently encounter the following warning: "DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the ...

Calculate the time difference between time A and time B using DayJs

This is a common issue, but the unique aspect of this situation is as follows: I am attempting to calculate the hours between 12:00 (timeA) and 20:00 (timeB). A basic dayjs(timeA).diff(timeB, 'hours') yields 8 hours. The challenge arises when c ...

The method piSession.buildPageInteractionSession is not valid

Hey there! I am facing an issue with a simple AJAX call to a PHP file. The request should be sent to the server and return back in an HTML input field. Unfortunately, I have not been able to resolve this error so far. Below is the code snippet: HTML: ...

I attempted to generate a 3x3 matrix and use ng-repeat to display the data, but unfortunately, the code is

This is the reply I received from the server. "data": [ { "id": 1, "ticket": "[ [\"5\",\"11\",\"24\",null, ...