In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one.

<div class="bar" ng-class="{'bar-visible': vm.visible}">

The transition works smoothly when the bar-visible class is added to the div.

Everything functions correctly in Chrome and IE.

However, when I add a wrapper div around it, the transition stops working on Internet Explorer (tested with IE10).

<div class="bar--wrapper" ng-if="vm.visible">
    <div class="bar" ng-class="{'bar--visible': vm.visible}">
</div>

I have tried including ngAnimate in this case. While it resolves the issue in Chrome, in IE, the red div appears immediately without playing the transition. There are no transitionstart (IE only) or transitionend events triggered.

You can see the problem illustrated in this plunker:

http://plnkr.co/vpJzudnLxTwoJGZoZaNd

Does anyone know what might be causing this issue?

angularjscsscss-transitionsng-animate

Answer №1

This code snippet showcases an example with two similar boxes added to your existing setup. Check it out here

<div ng-if="vm.visible">
  <div class="animate-box animate-if">
    <h2>Inner Class</h2>
  </div>
</div>
<div  class="animate-box animate-if" ng-if="vm.visible">
  <div>
    <h2>Outer Class</h2>
  </div>
</div>

The "Outer" animation works smoothly on both Internet Explorer and Chrome browsers.

However, Chrome handles the child animation for "Inner" more logically compared to Internet Explorer's behavior in this scenario.

When closing, neither the parent nor the child animations work as expected due to zero delay in removing the parent element.

It's worth noting that IE and Chrome seem to behave consistently based on the information provided at this resource

The CSS styles applied include:

.animate-box {
  height: 100px;
  width: 100px;
  background-color: red;
}

.animate-if.ng-animate {
  transition: all 3s linear;
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  background-color: yellow;
  opacity: 0;
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  background-color: red;
  opacity: 1;
}

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

Does the angular scope binding using the &(ampersand) operator only bind once or repeatedly?

Is the angular scope binding &(ampersand) a one time binding? I see it referred to as a one-way binding, but is it also one-time? Let's say I have: <my-custom-directive data-item="item" /> And my directive is declared as follows: .direct ...

javascriptangularjsangularjs-scopeangular-directive

What is the best way to reach the parent controller's scope within a directive's controller?

In a scenario where I have a custom directive nested inside a parent div with a controller that sets a variable value to its scope, like this: html <div ng-controller="mainCtrl"> <p>{{data}}</p> <myDirective oncolour="green" ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

AngularJS can easily interpret and extract information from HTML code

As an example, I have dynamically generated HTML on my webpage like this: <ul> <li>Country</li> <li>State</li> <li>City</li> </ul> I am looking to send this information to the database after clicking a b ...

javascriptangularjs

Attempting to utilize a Python web scraping tool to extract content from a webpage that undergoes regular text updates

I must admit that I am a complete beginner who is feeling lost and unsure of what to do. My goal is to extract 4 pairs of numbers from a webpage using a web scraper. These numbers change when modified on a different page, but I'm unable to pull the d ...

javascriptpythonhtmlcss

Utilizing ng-route to parse the URL and identify the corresponding controller by its name

I am implementing ng-click and ng-view to navigate my div id= "listings" in order to display various mobile listings including iphone 4, iphone 5, nexus 4, nexus 5, nexus 6, lg g3, and more. You can check out my code on Plunkr. <div ng-repeat = ' ...

javascriptangularjs

Protractor End-to-End Testing Issue: Module 'selenium-webdriver' Not Found

Error: Module 'selenium-webdriver' Not Found After globally installing protractor and selenium-webdriver with the command npm install -g protractor webdriver-manager update, I encountered an issue while requiring the 'selenium-webdriver&apo ...

angularjsseleniumprotractor

A guide on retrieving JSON data from an AJAX request using Angular UI Bootstrap

Greetings Friends, I have experience with traditional JavaScript and a little bit of JQuery. Now, for my new JAVA Web Based project, we need to utilize the latest technology to quickly build dynamic web pages. I don't have time to test all the widget/ ...

jqueryjsonangularjstwitter-bootstrap

The implementation of display flex is causing issues with the material-ui grid layout

Struggling to implement the grid system from material-ui due to an issue where grid items do not resize when resizing the browser window. The culprit seems to be a parent div with the style property "display": "flex". The dilemma arises from using a mater ...

htmlcssreactjsmaterial-ui

What steps are involved in setting up a point distribution system in AngularJS?

My objective is to develop a point allocation system within AngularJS. I have successfully created a basic directive that introduces DOM elements, including a span displaying "0" points and buttons for incrementing and decrementing. The total number of poi ...

javascriptangularjs

Guide to automatically adjust child div width to match parent container dimensions

I need assistance with structuring my HTML page, which consists of header, main, and footer sections. Below is the HTML and CSS code I'm utilizing: HTML code : <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

htmlcss

Accessing ExpressJS from AngularJS through local server

My latest project involves building a Web Application using AngularJS and ExpressJS. In this application, I have set up a GET "/" route in my app.js file to render the index.html page when accessed. One interesting feature is the GET "/test-data" route in ...

javascriptangularjsexpress

How come the centering of a text input field in an HTML form is proving to be so difficult using the text-align: center property?

Learning HTML has been quite the journey for me. One challenge I have faced is trying to center a search bar on my web page. Despite hours of searching and trying different tutorials, I still haven't been able to make it work. The CSS rule text-align ...

htmlcsstwitter-bootstrapbootstrap-4

Exploring the World of Angular JS Services

Following the recommended practices, I am working on encapsulating my global functions into reusable factory services. In the provided code snippet, my objective is to execute a function that takes the string value of "Qprogress" from my JSON data, perform ...

javascriptangularjsjsonangularjs-ng-repeat

Subscribe on Footer triggers automatic scrolling to the bottom of the page

Whenever I fill out the form in the footer and hit submit, it directs me to a different page while automatically scrolling back down to the footer. I'm looking for a solution that prevents this automatic scrolling. I've attempted using window.sc ...

javascripthtmlcss

Leveraging ngIf and ngFor within choice

Is there a way to combine ngIf and ngFor in a single line of code? Here is the code snippet I am currently using: <option *ngIf="tmpLanguage.id!=languages.id" *ngFor="let tmpLanguage of languages" [ngValue]="tmpLanguage.id"> {{tmpLang ...

javascriptangularjsangulartypescript

"Troubleshooting: Angular ng-click does not display any content

A problem arises when I attempt to load a view into a div upon a click event and it is not displaying anything. The issue seems to be centered around the "SkillCtrl" controller. angular.module('myApp') .controller('SkillCtrl', function ...

angularjs

Restore the initial content of the div element

Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...

javascriptjqueryhtmlcssdom

Is it possible to receive both errors and warnings for the same ESLint rule?

My team is currently in the process of refactoring our codebase, utilizing ESLint to pinpoint any lint errors within our files. Initially, we set high thresholds in one .eslintrc file and have been gradually decreasing these limits as we enhance specific f ...

javascriptangularjseslint

Extracting information from JSON ( AngularJS)

I have a collection of questions stored in my JSON file, but I want to display only one at a time until the user selects the correct answer and proceeds to the next question. Here is the HTML template: <div ng-controller="quizController"> <ul> ...

jsonangularjshtml

Leveraging the power of modernizr in an angular module to handle multiple

My current setup involves the use of 'Modernizr' to detect mobile devices. I have also created a file called 'touchevent.js' specifically for these devices. Within touchevent.js: var touchApp = angular.module('ngTouchEvent', ...

angularjsmodernizr