What causes the immediate firing of the DOM callback in Angular 1.2.9?

Check out a live demo here

View the source code on GitHub here

Angular 1.2.9 brought in DOM callbacks with the introduction of $animate:before and $animate:after events triggered during animations. However, it seems that the $animate:after event is triggered immediately after the $animate:before event rather than after the animation has been completed.

Whether using CSS or JS for animation (here), there doesn't seem to be any difference in behavior.

My question is: Is this behavior intentional for DOM callbacks?

Answer №1

Based on the details provided at this GitHub link, it appears that Angular 1.2.10 introduced a fresh event called $animate:close which can be utilized to trigger actions once an animation has finished.

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

Leveraging the power of Framer Motion in combination with Typescript

While utilizing Framer Motion with TypeScript, I found myself pondering if there is a method to ensure that variants are typesafe for improved autocomplete and reduced mistakes. Additionally, I was exploring the custom prop for handling custom data and des ...

javascript reactjs typescript css-animations framer-motion

How can Protractor be used to test content before Angular is fully loaded?

In my opinion, it's crucial to notify users when an Angular-based application is loading. For instance, in the case of Angular 2, you could use something like <view>Loading...</view>. I'm confident that there must be a similar method ...

angularjs testing protractor e2e-testing

Struggling to properly send props to the child component in Vue 3

Is there a way to pass data from the request through axios in the root component to the child using Vue? Currently, only the "title" field is displayed correctly, but I also need to output the "body". Note: This is my first time working with Vue and I&apo ...

javascript vue.js vue-component vuejs3

Trouble with ScrollTo animation on div with adjustable offset top feature - seeking assistance

Having trouble navigating to the correct slide when clicking the right button on the navigation menu. Clicking the menu button displays a list of links. Clicking on a link for the first time will take you to the correct slide, but if you try clicking a dif ...

javascript jquery animation var scrolltop

What could be causing my directive to not display my scope?

I am currently developing a directive that includes a custom controller, and I am testing the scope functionality. However, I am facing an issue where the ng-show directive is not functioning as expected when trying to test if the directive has a scope fro ...

javascript angularjs angularjs-directive angularjs-scope

Loop through the JSON data and dynamically display corresponding HTML code based on the data

I've developed a survey application using React, where I initially wrote code for each question to display radio buttons/inputs for answers. However, as the survey grew with multiple questions, this approach resulted in lengthy and repetitive code. To ...

javascript reactjs json

Utilizing Vue.js for enhanced user experience, implementing Bootstrap modal with Google Maps autocomplete

I recently set up a Bootstrap modal that includes an <input>. To enable Google autocomplete for it, I utilized the commonly known trick below: .pac-container { z-index: 10000 !important; } However, I have encountered difficulty in getting the a ...

javascript twitter-bootstrap google-maps vue.js autocomplete

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascript html css

Divide an HTML file into separate documents upon submitting a form

Is there a way to input HTML into a text area, then upon submission, have the system read the file, identify the class selector, and separate the HTML into multiple files saved in a directory? If you have any thoughts on how this could be accomplished, pl ...

javascript php jquery html forms

How can I create an efficient AngularJS application with minimal NPM dependencies?

Currently, as I develop my AngularJS app, I am utilizing npm to download all necessary JS dependencies. These dependencies are stored within the node_modules folder of my application, and everything is running smoothly. However, when it comes time to deli ...

angularjs npm gulp

The list attribute in AngularJS seems to be malfunctioning when used in Internet Explorer 11

My current issue involves using the 'find' method within a scope. While it works perfectly fine in Chrome, there seems to be compatibility issues with Internet Explorer 11. How can I resolve this and make it work smoothly on IE 11? $scope.NameLi ...

javascript angularjs internet-explorer-11

Invoking JavaScript function from an Android Activity

I have a simple JS function that is supposed to set values of some html contents, but it doesn't seem to be working properly. Here is the code for the JS function: function SetEdits(name,email,pic,date) { document.getElementById("myPic").src=pic; doc ...

javascript android android-webview

Error message: Unauthorized request error with the change.org JavaScript API

I am currently working on integrating the javascript API from change.org in order to retrieve all of my signed petitions for display on my source forge page. However, I am encountering an unauthorized request response from the change.org API. Despite tryi ...

javascript json

Empowering Components with React Hooks

I am currently in the process of transitioning from using class components to React hooks with the Context API. However, I am encountering an error and struggling to pinpoint the exact reason for it. Here are my Codes: // contexts/sample.jsx import React ...

javascript reactjs react-hooks react-context

Encounter a snag while using Chrome to access an external API through jQuery

I am currently utilizing jQuery to make a request to an external API via AJAX. $.ajax({ url: https://exampleAPI, method: "GET", contentType: "text/plain", dataType: "jso ...

javascript jquery ajax google-chrome asp.net-mvc-4

Auto-collapse sidebar upon clicking anywhere on the page

I have a dynamic sidebar that appears when the user clicks on a hamburger button. Here is the layout: $('#nav-toggle').click(function() { if($('#nav-toggle').hasClass('active')){ $('.menu').animate({ r ...

javascript jquery html css

Navigating the Terrain of Mapping and Filtering in Reactjs

carModel: [ {_id : A, title : 2012}, {_id : B, title : 2014} ], car: [{ color :'red', carModel : B //mongoose.Schema.ObjectId }, { color ...

javascript node.js reactjs

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

javascript html css css-transitions css-animations

Use JavaScript regex to replace a string only if its length exceeds a certain specified limit

javascript jquery

Closing the Material UI dialog from an inner component

In my application, I have implemented a sign-in dialog using Material UI. However, I have separated the login button into its own component. I am trying to figure out how to close the dialog when the submit button in the SigninForm component is clicked. I ...

javascript reactjs material-ui dialog modal-dialog

JavaScripter Q&A