动画未启动 ng-show/hide
Animations not kicking-in ng-show/hide
编辑
添加了一些 类,但我仍然缺少一些东西
$duration = .3s
.fade
transition $duration linear all
&.ng-enter
opacity 0
transition-delay $duration
&-active
opacity 1
&-hide
opacity 1
&.ng-hide
opacity 0
transition-delay $duration
&.ng-leave, &.ng-hide-remove
opacity 1
&-active
opacity 0
现在可以用了,但方式不对
假设我有这个简单的动画
animation.stylus
$duration = .3s
.fade
&.ng-enter
transition $duration linear all
opacity 0
transition-delay $duration
&-active
opacity 1
&.ng-leave
transition $duration linear all
opacity 1
&-active
opacity 0
animation.css
.fade.ng-enter {
-webkit-transition: 0.3s linear all;
transition: 0.3s linear all;
opacity: 0;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.fade.ng-enter-active {
opacity: 1;
}
.fade.ng-leave {
-webkit-transition: 0.3s linear all;
transition: 0.3s linear all;
opacity: 1;
}
.fade.ng-leave-active {
opacity: 0;
}
我错过了什么?因为它在 ng-view 中有效,但在 ng-show/hide 中无效。
为了工作,ng-show(和 ng-hide)需要额外的显式 css(或 js)规则,它们是:
.fade
&.ng-hide-add
opacity 1
&-active
opacity 0
display none
&.ng-hide-remove
opacity 0
&-active
opacity 1
编辑
添加了一些 类,但我仍然缺少一些东西
$duration = .3s
.fade
transition $duration linear all
&.ng-enter
opacity 0
transition-delay $duration
&-active
opacity 1
&-hide
opacity 1
&.ng-hide
opacity 0
transition-delay $duration
&.ng-leave, &.ng-hide-remove
opacity 1
&-active
opacity 0
现在可以用了,但方式不对
假设我有这个简单的动画
animation.stylus
$duration = .3s
.fade
&.ng-enter
transition $duration linear all
opacity 0
transition-delay $duration
&-active
opacity 1
&.ng-leave
transition $duration linear all
opacity 1
&-active
opacity 0
animation.css
.fade.ng-enter {
-webkit-transition: 0.3s linear all;
transition: 0.3s linear all;
opacity: 0;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.fade.ng-enter-active {
opacity: 1;
}
.fade.ng-leave {
-webkit-transition: 0.3s linear all;
transition: 0.3s linear all;
opacity: 1;
}
.fade.ng-leave-active {
opacity: 0;
}
我错过了什么?因为它在 ng-view 中有效,但在 ng-show/hide 中无效。
为了工作,ng-show(和 ng-hide)需要额外的显式 css(或 js)规则,它们是:
.fade
&.ng-hide-add
opacity 1
&-active
opacity 0
display none
&.ng-hide-remove
opacity 0
&-active
opacity 1