我是ngAnimate的新手,我试图去体会一些非常简单的东西。AngularJS ng-show with fade animation
单击按钮时显示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); */
}
提前
非常感谢,它正常工作就像我想要的一样。 我不知道你必须使用CSS隐式,这很有用 - – DPF
编辑:我只是注意到,那ng-init它不工作。我想首先展示,无需点击,div1 你知道为什么吗? – DPF
@DPF变量'test.showBoxOne'未初始化!你能重新检查我的答案吗? –