Search code examples
javascriptangularjsng-animateangular-formly

Use ngAnimate with Angular-Formly (ngHide/ngShow)

I am attempting to use ngAnimate to smooth the hide/show transitions on a formly generated page. However, it does not appear that the ng-animate hooks are adding the add/remove css classes to the element. The element still hides and shows as expected but does not fade in or out like the non-formly example Non-Formly JSBin

Here is the sample with formly Formly JSBin

If anyone has run into this or has any ideas on how to get it working as expected it would be much appreciated.

The formly bin has been updated to reflect the answer below

Solution

  • A few problems. First, your jsbin using formly wasn't adding ngAnimate as a dependency. Also, angular-formly uses ng-hide to show/hide fields, not ng-show. If you want to make it use ng-show, use the hide-directive attribute like this.

    Or you could just change your animation css to work with ng-if. Good luck!