动画未启动 ng-show/hide

Question

编辑

添加了一些类，但我仍然缺少一些东西

$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 中无效。

Answer 1

为了工作，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

动画未启动 ng-show/hide

Animations not kicking-in ng-show/hide

angularjs

stylus