javascript - Is there an angular animate way to emulate this ng-class behaviour -
i tried use ng-animate included in controller app = angular.module('packs', ['nganimate']); style:
<style> .animate-in { opacity: 0; max-height: 0; overflow: hidden; -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; } .animate-out{ opacity: 1; max-height: 200px; -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; } </style> this html not working, well, work, had toggling classes manually, wanted use ng-animate
<div ng-click="toggle('pack1')"> <div class="text" ng-class="{'animate-in' : !displays.pack1, 'animate-out' : displays.pack1}"> text toggle </div> </div>
yes, use ng-show = "displays.pack1" on text , use special classes ng-hide/ng-hide-active, see example in documentation
here jsfiddle shows toggle opacity , height: http://jsfiddle.net/1djeqjfm/1/
.box.ng-hide { opacity:0; } .box.ng-hide-active { opacity:1; } (or use ng-if , classes ng-enter/ng-leave)
Comments
Post a Comment