演示: http://plnkr.co/edit/cPDUWO?p=preview
我在页面上显示了 2 个选中的复选框和 2 个小部件。单击复选框将使用 ng-show
和 ng-hide
来隐藏和显示相应的小部件。现在我也想有一个基本的 fadeIn
和 fadeOut
,但是到目前为止运气不好 :( 显示/隐藏的小部件没有任何淡入淡出动画。你能看到我在哪里吗?我出错了吗?
Controller
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; }
}
HTML
<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>
最佳答案
看起来正确的样式应该包括 .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
关于javascript - ngAnimate CSS 动画不适用于 ng-show 和 ng-hide,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26720664/