我是ngAnimate的新手,我正在努力完成一些非常简单的事情。
单击按钮时显示div1并隐藏div2(我设法做到了)。当div离开/显示时我会显示淡入淡出的动画(我没有设法做到这一点)
我不想在它离开/显示时同时显示两个div。
我准备了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); */
}
提前致谢
答案 0 :(得分:1)
我认为这应该是解决方案。
因为我们正在使用ng-show
,所以我们应该包含适当的CSS。你也不能对两个div都有相同的条件,所以其中一个ng-show
将是
<div class="box fade" ng-show="!test.showBoxOne">
<p>This is Div 2</p>
</div>
</div>
<强> HTML:强>
<div ng-app="sandbox" ng-init="visibleDiv='div1';test.showBoxOne=true;">
<div layout="row" flex layout-align="center">
<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>
</div>
<section layout="row">
<div class="" ng-show="visibleDiv == 'div1'" flex>
<div class="box fade" ng-show="test.showBoxOne">
<p>This is Div 1</p>
</div>
</div>
<div class="" ng-show="visibleDiv == 'div2'" id="div2" flex>
<div class="box fade" ng-show="!test.showBoxOne">
<p>This is Div 2</p>
</div>
</div>
</section>
</div>
<强> CSS:强>
.box{
background-color:black;
color:white;
border:1px solid red;
}
.fade {
transition: all linear 1s;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
.ng-hide {
opacity: 0;
transition: none 0;
}
我希望这能解决你的问题!
答案 1 :(得分:0)
在您的代码中
Authorization: Basic <basic credentials>
你还没有给div应用box-one类,你已经应用了动画
<div class="box" ng-show="test.showBoxOne">
将其更正为:
.box-one.ng-hide {
opacity:0;
/* transform: scale(0.8); */
}
这是更新的小提琴 Your FIDDLE