Angular animation - stuck animations in the middle

Question

I use angular animations to create animations. I have a simple html with a structure like this:

<div> <div ng-if="something1" class="animate-if"> <div ng-include="ctrl1"> </div> </div> <div ng-if="something2" class="animate-if"> <div ng-include="ctrl2"> </div> </div> <div ng-if="something3"> -- here is html content without include-- </div> </div> 

Also, these are the animations that I use:

 .animate-if{ position: absolute; background-color: white; opacity: 1; } .animate-if.ng-enter, .animate-if.ng-leave { -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; z-index: 99999; } .animate-if.ng-enter{ left: 100%; } .animate-if.ng-enter.ng-enter-active { left: 0; } .animate-if.ng-leave { left: 0; } .animate-if.ng-leave.ng-leave-active{ left: 100%; } 

sometimes the result i get is that the div to be displayed is partially displayed:

Do you have an idea what I'm doing wrong?

Thanks!

Answer 1

Assuming the primary problem revolves around animating the “left” property for each of the “something #” divs, there are a few things that I would suggest for the animation to succeed.

First, the class 'animate-if' is assigned to several elements. You must programmatically assign the class "animate-if" only to the selected div "something #". You need some kind of device (it looks like you have tabs) to choose between different divs. This selection can be registered through an AngularJS controller, for example, with a $ clock, which appropriately assigns the class "animate-if".

To simplify your CSS, you can opt out of class declarations associated with the ng-enter and ng-leave declarations. They are not needed.

You need the base state for the `something # 'divs, represented by a simple class that sets the left CSS property to some negative left position outside its corresponding parent element. This container class can also handle the transition property.

The "animate-if" class assigned to select an interest should include CSS properties that represent the visible "something" div in its visible state and position at rest.

Here's what these two classes simplified might look like:

  .container { left: -100%; transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; opacity: 0; } .animate-if { left: 0; opacity: 1; } 

Regarding partial rendering or drawing of the transition, you have the "background-color" and "opacity" declared for the ".animate-if" class, as well as the CSS3 transition property. It is unclear whether you are going to revitalize the opacity. From your screenshot it seems that you can use the old browser. IE8 and IE9 do not support CSS3 transitions . And IE8 has only partial opacity support . What you see may be a limitation of the browser itself, but this is an assumption, since we do not have your full markup to study.

I wrote a Codepen example for you.