Emanuele Tuttolani Emanuele Tuttolani - 1 month ago 15
AngularJS Question

Animations not kicking-in ng-show/hide

Edit

Added some classes, but I'm still missing something

$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


It works now, but not in the right way




Let's say I have this simple animation

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;
}


What am I missing? Because it works in ng-view, but doesn't in ng-show/hide.

Answer

In order to work, ng-show (and ng-hide) need additional explicit css (or js) rules, here they are:

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