CODEWITHSUNDEEP
angularjs
Collin Henderson
Collin Henderson

Reputation: 1154

Angular - ngShow/Hide animation only fires on ng-click?

I'm using Angular version v1.2.20 and I'm encountering some weirdness with regards to css transitions when using ng-show/hide. For some reason, if I change the value of a scope object by calling a function through ng-click the animation works fine, but if I change it by some other method, say a timeout, or even just calling it in an init function, the element shows, but no animation happens. Here's a small example function that animates when being called from ng-click, but doesn't otherwise.

showFlash: (msg, type = "success") ->
  @$.flash =
    "message": msg
    "type": type
  @$timeout =>
    @$.hideFlash()
  , 3000

hideFlash: ->
  @$.flash = null

P.S - I'm using Angular Classy for my controller if you're wondering about the funny @$ syntax.

CSS (Scss)

.dashboard-flash-message {
  @include transition ( all 300ms ease-in-out );
  @include transform( translateY(0) );
  background: $primary;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  opacity: 1;
  padding: 20px;
  position: absolute; bottom: 0; left: 0;
  width: $dashboard-sidebar-width;

  &.ng-hide {
    @include transform( translateY(100%) );
    opacity: 0;
  }
}

Upvotes: 2

Views: 1966

Answers (1)

Michael Kang
Michael Kang

Reputation: 52867

There are 4 classes that Angular uses to animate ng-show/ng-hide:

.ng-hide-add
.ng-hide-add-active
.ng-hide-remove
.ng-hide-remove-active

I don't see that you're using them in your stylesheet.

CSS

.ng-hide-add {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity: 1;
}
.ng-hide-add.ng-hide-add-active { 
    opacity: 0;
}

.ng-hide-remove {
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
   -o-transition:0.5s linear all;
   transition:0.5s linear all;
    opacity: 0;
}
.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1;
}

Script

var app = angular.module("app", ['ngAnimate']);
app.controller('Ctrl', function($scope, $timeout) {
     $scope.show = false;
     $scope.onShow = function() { 
        $scope.show = true;
        $timeout(function() { 
           hideMe();
        },2000);
     }
     function hideMe() {
        $scope.show = false;
     }
});

Here is a Plunker that demonstrates how they should be used.

Upvotes: 3

Related Questions