ngAnimate CSS 动画不适用于 ng-show 和 ng-hide
Posted
技术标签:
【中文标题】ngAnimate CSS 动画不适用于 ng-show 和 ng-hide【英文标题】:ngAnimate CSS animation not working with ng-show & ng-hide 【发布时间】:2014-12-30 11:43:14 【问题描述】:演示:http://plnkr.co/edit/cPDUWO?p=preview
我在页面上显示了 2 个选中的复选框和 2 个小部件。单击复选框将使用ng-show
和ng-hide
隐藏和显示相应的小部件。现在我还想拥有一个基本的fadeIn
和fadeOut
,但是到目前为止还没有运气:( 显示/隐藏而没有任何淡入淡出动画的小部件。你能看出我哪里出错了吗?
控制器
animateApp.controller('mainController', function($scope)
$scope.pageClass = 'page-home';
$scope.widget_manage_quotes = true;
$scope.widget_manage_customer = true;
);
CSS
.reveal-animation.ng-enter
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
.reveal-animation.ng-leave
-webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
@-webkit-keyframes enter_sequence
0% opacity:0;
100% opacity:1;
@keyframes enter_sequence
0% opacity:0;
100% opacity:1;
@-webkit-keyframes leave_sequence
0% opacity:1;
100% opacity:0;
@keyframes leave_sequence
0% opacity:1;
100% opacity:0;
<ul>
<li>
<input
ng-click="widget_manage_quotes = !widget_manage_quotes"
type="checkbox"
name="w_manage_quotes"
id="w_manage_quotes"
class="css-checkbox"
checked />
<label for="w_manage_quotes" class="css-label radGroupWidgetOptions">Toggle Widget 1</label>
</li>
<li>
<input
ng-click="widget_manage_customer = !widget_manage_customer"
type="checkbox"
name="w_manage_customers"
id="w_manage_customers"
class="css-checkbox"
checked />
<label for="w_manage_customers" class="css-label radGroupWidgetOptions">Toggle Widget 2</label>
</li>
</ul>
<div ng-show="widget_manage_quotes" class="manage_content dash_widget reveal-anim ation">
<div class="widget_box box1">
<h1>Widget 1!</h1>
</div>
</div>
<div ng-show="widget_manage_customer" class="manage_content dash_widget reveal-animation">
<div class="widget_box box2">
<h1>Widget 2!</h1>
</div>
</div>
【问题讨论】:
【参考方案1】:看起来正确的样式应该包括.ng-hide-add
和.ng-hide-remove
:
.reveal-animation.ng-hide.ng-hide-add-active
display: block !important;
.reveal-animation.ng-hide-remove
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
.reveal-animation.ng-hide-add
-webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
我还必须为.ng-hide.ng-hide-add-active
添加样式,以防止ng-hide
在动画期间立即隐藏元素。
演示:http://plnkr.co/edit/HsyRYLTwcsvP9pok8BV6?p=preview
【讨论】:
以上是关于ngAnimate CSS 动画不适用于 ng-show 和 ng-hide的主要内容,如果未能解决你的问题,请参考以下文章
ngAnimate 在 AngularJS 1.6.4 中停止工作