angularjs - How do you animate ng-show? -
i fade out ul on ng-show=false. add css:
ul { -webkit-transition: 2s; transition: 2s; } .ng-show-remove, .ng-show-add, .ng-hide-remove, .ng-hide-add { display:block!important; } ul.ng-hide { opacity: .2; } but when ng-show set false instantly disappears. how fade out instead of instantly disappearing?
click 1 of li in fiddle demonstration.
i've attached fiddle solution.
a few things note:
the angular version included in fiddle doesn't support css animations. you'll need update 1.2 version (which requires include angular-animate.js file , nganimate module app)
var app = angular.module('foo', ['nganimate']);
Comments
Post a Comment