当ng-if = false时淡出动画

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

当ng-if="false"而不是立即隐藏HTML元素时，是否有任何方法可以让动画淡出?

I can fade-in when ng-if="true" but can't when ng-if="false". When ng-if="true" I'm using Animate.css library to animate with fade-in.

我可以在ng-if="true"时淡出，但不能在ng-if="false"时淡出。当ng-if="true"时，我用的是动画。css库的动画与渐隐。

2 个解决方案

#1

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

您应该为此使用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>

#2

-13

Instead of using an ng-if to handle this functionality, you could use the javascript.

不使用ng-if来处理这个功能，您可以使用javascript。

So in your Controller function where you are setting your ng-if Boolean add the fadeIn class directly to the html element there and if the condition becomes false add the fadeOut.

所以在你的控制器函数中，你在设置你的ng-如果布尔值将fadeIn类直接添加到那里的html元素，如果条件变为假，添加fadeOut。

For example: $( "div" ).addClass( "fadeIn" );

例如:$(“div”)。addClass(“渐明”);

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

#1