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

Question

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?

angularjs css css-transitions ng-animate

Answer 1

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;
}

Answer 2

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;
}

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

Answer №1

Similar questions

CSS does not alter the properties of a link's "background-color" or "border-color"

Wrapping HTML input elements in a div for alignment

Is there a way to modify the color of a checkbox within MUI?

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

Responsive Div that Resizes Proportionally within Parent Container

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

Displaying messages in an Angular 2 chatbox from the bottom to the top

Choose an input that is not grouped with the rest

Managing bulk uploaded files using PHP

easy method for creating a hyperlink that triggers a "download" pop-up box

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

Scroll down 1 page using Javascript and Jquery

How to dynamically update data in Angular without the need for a page refresh or loading?

Nest two div elements within a parent div with varying margins

What is the best way to fill a dropdown menu with names and corresponding numeric IDs?

Angular component not transmitting any data through binding

outdoor checkboxes indicate completion

Ensure that a div remains active even after it has been selected through AJAX using jQuery

Prevent lengthy headers from disrupting the flow of the list items

AngularJS Google Chart: Customize pie chart tooltip to exclude percentage