DEMO: http://plnkr.co/edit/cPDUWO?p=preview http://plnkr.co/edit/cPDUWO?p=preview
我在页面上显示了 2 个选中的复选框和 2 个小部件。单击复选框将使用ng-show
& ng-hide
隐藏和显示相应的小部件。现在我也想要一个基本的fadeIn
and 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; }
}
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
and .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
在动画过程中立即隐藏元素。
Demo: http://plnkr.co/edit/HsyRYLTwcsvP9pok8BV6?p=preview http://plnkr.co/edit/HsyRYLTwcsvP9pok8BV6?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)