我正在开发一个角度应用程序,我在按钮单击时使用 ng-show 属性中的动画来显示和隐藏 div 元素。它在隐藏情况下工作正常,但在显示情况下不能正常工作,它会立即显示没有动画。您可以在示例中看到相同的行为:http: //yearofmoo-articles.github.io/angularjs-animation-article/app/#/ng-show-hide。
我的代码是
<div class="row-fluid">
<button class="btn btn-large btn-success pull-right" type="button" ng-click="showtravelSchedule=!showtravelSchedule">Search</button>
</div>
<div class=" span3 module offset1 community-bulletin" ng-show="showtravelSchedule" ng-animate="{show: 'example-show', hide: 'example-hide'}">
</div>
而CSS是
.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.example-show {
opacity:0;
}
.example-show.example-show-active {
opacity:1;
}
.example-hide {
opacity:1;
}
.example-hide.example-hide-active {
opacity:0;
}