带有淡入淡出动画的AngularJS ng-show [英] AngularJS ng-show with fade animation
本文介绍了带有淡入淡出动画的AngularJS ng-show的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是ngAnimate的新手，我正在尝试完成一些非常简单的事情.
I'm new to ngAnimate and I'm trying to accomplish something really simple.
单击按钮时显示div1并隐藏div2(我设法做到了).并在div离开/显示时显示淡入淡出的动画(我没有做到这一点)
Show div1 and hide div2 when a button is clicked (I managed to do that). And display a fade animation when a div leaves/shows (I didn't manage to do that)
而且我不想在离开/显示时同时显示两个div.
And I don't want to show both divs at the same time when it leaves/shows.
我准备了 JSFIDDLE
I prepared a JSFIDDLE
这是代码
HTML
<body ng-controller="AniCtrl as test" >
<div ng-app="app" ng-init="visibleDiv='div1'">
<md-button ng-click="visibleDiv='div1';test.showBoxOne = !test.showBoxOne">Div 1</md-button>
<md-button ng-click="visibleDiv='div2';test.showBoxOne = !test.showBoxOne">Div 2</md-button>
<section>
<div ng-show="visibleDiv == 'div1'" flex>
<div class="box" ng-show="test.showBoxOne">
<p>This is Div 1</p>
</div>
</div>
<div ng-show="visibleDiv == 'div2'" id="div2" flex>
<div class="box" ng-show="test.showBoxOne">
<p>This is Div 2</p>
</div>
</div>
</section>
</div>
</body>
JS
angular.module('app', ['ngMaterial', "ngAnimate"]);
app.controller('AniCtrl', AniCtrl);
function AniCtrl() {
var self = this;
self.showBoxOne = false;
self.showBoxTwo = false;
}
CSS
.box{
background-color:black;
color:white;
border:1px solid red;
}
.box-one {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.box-one.ng-hide {
opacity:0;
/* transform: scale(0.8); */
}
谢谢
推荐答案
我认为这应该是解决方案.
I think this should be the solution.
因为我们使用的是 ng-show ，所以我们应该包含适当的CSS.另外，两个div不能具有相同的条件，因此 ng-show 之一将是
Because we are using ng-show we should include the appropriate CSS. Also you cant have the same condition for both divs, so one of the ng-show will be
<div class="box fade" ng-show="!test.showBoxOne">
<p>This is Div 2</p>
</div>
</div>
查看全文
