angular-animate - animations are 'stuck' in the middle

Question

I'm using angular-animate to create animations. I have a simple html with a structure similar to 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>

in addition, these are the animations i'm using:

.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 that should be displayed is partial displayed:

Do you have any idea what i'm doing wrong?

Thanks!

Answer 1

Presuming that the primary issue revolves around the animation of the 'left' property for each of the 'something#' divs, there are a few things I would suggest to ensure the animation succeeds.

First, the 'animate-if' class is being assigned to multiple elements. You should programmatically assign the 'animate-if' class only to the 'something#' div that is being selected. You need some device (seems like you have tabs) to select between the different divs. This selection can be registered via an AngularJS controller, for example, with a $watch that assigns the 'animate-if' class accordingly.

To simplify your CSS, you can dispense with the 'ng-enter' and 'ng-leave' related class declarations. They are unnecessary.

You need a base state for the 'something#' divs, represented by a simple class that sets the left CSS property to some negative, left position beyond the edge of their respective parent element. This 'container' class can also handle the transition property.

The 'animate-if' class, assigned to the selection of interest, should include the CSS properties that represent the visible 'something#' div in its visible state and position at rest.

Here's what those 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 the partial rendering or painting of the transition, you have 'background-color' and 'opacity' declared for the '.animate-if' class, and there's also the CSS3 'transition' property itself. It's unclear whether or not you intend to animate the opacity. From your screenshot, it looks as though you might be using a legacy browser. IE8 and IE9 do not support CSS3 transitions. And, IE8 only has partial support for opacity. What you are seeing could be a limitation of the browser itself, but that's a guess as we do not have your full markup to explore.

I've written a Codepen example for you.