Анимации не ногами в нг-шоу/скрыть

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.s tylus

$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

Для того, чтобы работать, нг-шоу (и нг скрыть) нуждаются в дополнительной явной CSS (или JS) правила, вот они:

.fade 
    &.ng-hide-add 
    opacity 1 
    &-active 
     opacity 0 
     display none 
    &.ng-hide-remove 
    opacity 0 
    &-active 
     opacity 1