Fade out animation when ng-if = false

Question

Is there any way to animate with fade out when ng-if=\"false\" instead of instantly hide the HTML element?

I can fade-in when ng-if=\"true\" bu

Answer 1

You should use ng-animate for this. It's a native angular library that adds transition classes and a delay upon removing elements

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

  Click me
  

    SomeContent
  
  

    SomeOtherContent