当ng-if = false时淡出动画

Question

有没有办法在淡出时动画ng-if="false"而不是立即隐藏HTML元素？

我可以在什么时候淡出,ng-if="true"但不能在什么时候ng-if="false".当ng-if="true"我使用Animate.css库来使用淡入功能进行动画处理时.

Answer 1

你应该用ng-animate它.它是一个原生的角度库,可以在删除元素时添加过渡类和延迟

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>