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

Question

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

Answer 1

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.