How to use ng-animate to add slide effect on menu

Question

I am trying to implement a slide effect using ng-animate and CSS styles, but can't figure out what's wrong with my code...

Can I do this using values in percentages for min-height and max-height? I cant use fixed values in px.

JSFIDDLE

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a>
  <div class="menu" ng-show="collapsed" ng-animate="{show: 'menu-show', hide: 'menu-hide'}">
    <div class="files">
      <input type="checkbox" />
      <label>first</label>

      <input type="checkbox" />
      <label>second</label>
    </div>
    <div class="diffs">
      <input type="checkbox" />
      <label>first</label>

      <input type="checkbox" />
      <label>second</label>
    </div>
  </div>
</div>

CSS:

.menu-show-setup, .menu-hide-setup {
  transition:all 0.5s ease-out;
  overflow:hidden
}

.menu-show-setup {
  max-height:0;
}
.menu-show-setup.menu-show-start {
  max-height:25%;
}

.menu-hide-setup {
  max-height:25%;
}
.menu-hide-setup.menu-hide-start {
  max-height:0;
}

Could you be more descriptive when describing the actual error that you encounter? Could you post any errors that you see when using a debugger? — Evan Bechtol, Apr 07 '16 at 11:25
My issue is that the slide effect doesn't work. There are no errors in debugger. — Valip, Apr 07 '16 at 11:26
Check this question I posted regarding ng-animate, it may help you: http://stackoverflow.com/a/33927043/4515720 — Evan Bechtol, Apr 07 '16 at 11:28
Your fiddle doesn't define ng-animate as a dependency, therefore it is not used. See: https://docs.angularjs.org/api/ngAnimate — S.B., Apr 07 '16 at 11:30
@S.B. to be fair, his fiddle doesn't contain any angular code, at all. — Evan Bechtol, Apr 07 '16 at 11:34
@EvanBechtol It does initialize an (anonymous) ng-app in the most outer div, which is why the toggle works at all. — S.B., Apr 07 '16 at 11:35
@S.B. true, I think that it would be helpful of O.P. to update the post with the app.js file that shows application dependencies. — Evan Bechtol, Apr 07 '16 at 11:36
I have updated my fiddle. I don't have experience using AngularJS and some answers with code would help me a lot... — Valip, Apr 07 '16 at 11:40
@PavelValeriuthe link I sent would help you quite a bit, it literally contains your answer — Evan Bechtol, Apr 07 '16 at 11:42
refer this SO answer to understand how `ng-animate` works, http://stackoverflow.com/a/15863113/1677272 — dreamweiver, Apr 07 '16 at 12:15

score 0 · Answer 1 · answered Apr 07 '16 at 12:49

First ensure you have angular and angular-animate loaded. The CDN for angular-animate is ...

<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>

Then you need to reference the animations that ngAnimate gives ...

https://docs.angularjs.org/api/ngAnimate

For example, ng-if when switched from false to true will add the class .fade AND .ng-enter to the element on which the ng-if is located. These classes will be automatically removed after a short time. ngAnimate does this for you.

What you HAVE to do is to style what these classes do ...

example:

.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

now ng-animate will animate from .fade.ng-enter to .fade.ng-enter.ng-enter-active

if you do not define these styles ng-animate will do nothing. You will see classes being added and remove by ng-animate if you inspect the relevant element in your browser's develop tools. If you cannot see these classes being added and removed then something is wrong with your loading of angular or ng-animate.

Tried all kind of solutions but none of them work...this bring me headaches. What is wrong with this code? https://jsfiddle.net/wad7rzLa/4/ — Valip, Apr 07 '16 at 13:22

How to use ng-animate to add slide effect on menu

1 Answers1