当ng-if = false时淡出动画

Question

有没有办法在ng-if="false"时使用淡出功能进行动画处理，而不是立即隐藏HTML元素？

我可以在ng-if="true"时淡入，但在ng-if="false"时可以。 ng-if="true" {I}使用Animate.css库动画时使用淡入功能。

Answer 1

您应该使用. .\functions.ps1。它是一个原生的角度库，可以在删除元素时添加过渡类和延迟

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

Answer 2

您可以使用javascript，而不是使用ng-if来处理此功能。

因此，在您设置ng-if布尔值的Controller函数中，将fadeIn类直接添加到那里的html元素，如果条件变为false，则添加fadeOut。

例如： $（＆＃34; div＆＃34;）。addClass（＆＃34; fadeIn＆＃34;）;

https://api.jquery.com/addclass/