DEMO: http://plnkr.co/edit/cPDUWO? p = preVIEW
我有2个选中的复选框,并显示在页面上2的小部件。点击复选框将使用 NG-节目
&安培; NG-隐藏
隐藏和显示相应的部件。现在,我想也有一个基本的淡入
和淡出
,但至今没有运气:(,展示了小部件/隐藏没有任何的动画渐变。你能看到我要去哪里错了?
控制器
animateApp.controller('mainController',函数($范围){ $ scope.pageClass =页面家; $ scope.widget_manage_quotes = TRUE; $ scope.widget_manage_customer = TRUE;});
CSS
.reveal-animation.ng进入{ -webkit-动画:enter_sequence 1秒线性的; / * Safari /铬* / 动画:enter_sequence 1秒线性的; / * + IE10未来的浏览器* /}.reveal-animation.ng休假{ -webkit-动画:leave_sequence 1秒线性的; / * Safari /铬* / 动画:leave_sequence 1秒线性的; / * + IE10未来的浏览器* /}@ -webkit-关键帧enter_sequence { 0%{不透明度:0; } 100%{不透明度:1; }}@keyframes enter_sequence { 0%{不透明度:0; } 100%{不透明度:1; }}@ -webkit-关键帧leave_sequence { 0%{不透明度:1; } 100%{不透明度:0; }}@keyframes leave_sequence { 0%{不透明度:1; } 100%{不透明度:0; }}
HTML
< UL> <立GT; <输入 NG-点击=widget_manage_quotes =!widget_manage_quotes 类型=复选框 NAME =w_manage_quotes ID =w_manage_quotes 类=CSS-复选框 检查/> <标签=w_manage_quotes级=CSS标签radGroupWidgetOptions>切换窗口小部件1 LT; /标签> < /李> <立GT; <输入 NG-点击=widget_manage_customer =!widget_manage_customer 类型=复选框 NAME =w_manage_customers ID =w_manage_customers 类=CSS-复选框 检查/> <标签=w_manage_customers级=CSS标签radGroupWidgetOptions>切换窗口小部件2'; /标签> < /李> < / UL> < DIV NG秀=widget_manage_quotes级=manage_content dash_widget透露,动画操作。> < DIV CLASS =widget_box BOX1> < H1>的Widget 1 LT;!/ H1> < / DIV> < / DIV> < DIV NG秀=widget_manage_customer级=manage_content dash_widget显示动画> < DIV CLASS =widget_box BOX2> &所述; H1>窗口小部件2';!/ H1> < / DIV> < / DIV>
解决方案
貌似正确的方式应该包括 .ng隐藏-添加
和。 NG-捉迷藏删除
:
.reveal-animation.ng-hide.ng隐藏-添加活性{ !显示:块重要;}.reveal-animation.ng隐藏,删除{ -webkit-动画:enter_sequence 1秒线性的; / * Safari /铬* / 动画:enter_sequence 1秒线性的; / * + IE10未来的浏览器* /}.reveal-animation.ng隐藏,添加{ -webkit-动画:leave_sequence 1秒线性的; / * Safari /铬* / 动画:leave_sequence 1秒线性的; / * + IE10未来的浏览器* /}
我也不得不添加样式 .ng-hide.ng隐藏,添加活性
来prevent NG-隐藏。
DEMO: http://plnkr.co/edit/cPDUWO?p=preview
I have 2 checked checkboxes and 2 widgets displayed on the page. Clicking the checkboxes will use ng-show
& ng-hide
to hide and show the corresponding widget. Now I want to also have a basic fadeIn
and fadeOut
, however no luck so far :( The widgets that show/hide without any fade animation. Can you see where I'm going wrong?
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>
解决方案
Looks like correct styles should include .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 */
}
I also had to add style for .ng-hide.ng-hide-add-active
to prevent ng-hide
from immediately hiding elements during animation.