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

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!