当ng-if = false时淡出动画 [英] Fade out animation when ng-if = false
本文介绍了当ng-if = false时淡出动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
ng-if="false"
时,有什么方法可以淡出动画,而不是立即隐藏HTML元素?
Is there any way to animate with fade out when ng-if="false"
instead of instantly hide the HTML element?
当ng-if="true"
时,我可以淡入,但当ng-if="false"
时,我不能淡入. ng-if="true"
时,我正在使用 Animate.css 库进行淡入淡出的动画./p>
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-animate
.这是一个本机的角度库,它添加了过渡类和删除元素时的延迟
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;
}
<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>
这篇关于当ng-if = false时淡出动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文