修改
添加了一些课程,但我仍然遗漏了一些内容
$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中没有。
答案 0 :(得分:0)
为了工作,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