ДЕМО: 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; }
}
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>