I'm struggling to animate div elements when toggled using the Angular directive *ngIf.
The issue I'm facing seems to be a common delay/timing problem in animations, but I haven't been able to find a solid solution.
1) When the current element begins its exit animation, it is still present in the DOM.
2) The new element starts its animation during this overlap.
3) The main problem arises when the exiting element completes its animation and is removed from the DOM while the entering element is already visible, resulting in a UI glitch.
The code snippet below, though not written by me, reflects my dilemma.
Could someone provide guidance on how to resolve this issue?
angular.module('app', ['ngAnimate']).
controller('ctrl', function(){});.fade-element-in.ng-enter {
transition: 0.8s linear all;
opacity: 0;
}
.fade-element-in-init .fade-element-in.ng-enter {
opacity: 1;
}
.fade-element-in.ng-enter.ng-enter-active {
opacity: 1;
}
.fade-element-in.ng-leave {
transition: 0.3s linear all;
opacity: 1;
}
.fade-element-in.ng-leave.ng-leave-active {
opacity: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<a href="" ng-click="showMe = !showMe">Click me</a>
<div class="fade-element-in" ng-if="showMe">
SomeContent
</div>
<div class="fade-element-in" ng-if="!showMe">
SomeOtherContent
</div>
</div>