I'm trying to trigger ngShow via my controller, it works, but it doesn't make use of the ngAnimate classes that I need to get a fade transition.
It works like it should if I use a button to toggle ngShow, but not if I toggle it programmatically. Is this expected behavior? Can I get around it?
Plunk: http://plnkr.co/edit/swJDP1KBBxcRfK9auYPs?p=preview
<body ng-controller="MainCtrl">
<input type="checkbox" ng-model="visible">
<div ng-show="visible" class="wrap" role="document">
Hello
</div>
</body>
var app = angular.module( "app", ['ngAnimate']);
app.run(function($rootScope) {
$rootScope.visible = false;
});
app.controller('MainCtrl', function($rootScope, $scope) {
$rootScope.visible = true;
});
.wrap.ng-hide-add-active {
display: block!important;
transition: 0.5s ease-in-out all;
}
.wrap.ng-hide-remove-active {
display: block!important;
transition: 0.5s ease-in-out all;
transition-delay: 0.5s;
}
.wrap.ng-hide {
opacity: 0;
}
You're run block and controller code likely get executed in the same digest cycle so Angular doesn't see the
visiblevariable changing. This would work if you put your controller code in a timeout. e.g.http://plnkr.co/edit/5IhGE3ol5kI64OlT1e8v?p=preview