0

I have a HTML mockup like this

<div id="headbar" ng-swipe-left="ToogleMenu()">
  <div id="menu" ng-hide="menuTogglestate">
    <ul>
      <li><a href="#">Menu</a></li>
      ....
    </ul>
  </div>
</div>

How can I access in my controler in the Togglemenu function the #menu point or call a ng-animation I refer to menu in the mockup? Or do I have to add the animation on top of ng-hide from #menu? As I have a jQuery background, I'm a bit lost with the way AngularJS animations are working. But I don't want to use jQuery at all otherwise I will never lear Angular the right way. Just for the record, I would like to use javascript and not css keyframe animations.

Daiwei
  • 40,666
  • 3
  • 38
  • 48
Johnny000
  • 2,058
  • 5
  • 30
  • 59
  • Do you mean you want to trigger `ToogleMenu()` on swipe left and change `menuTogglestate` to `false` then display `#menu`? – Daiwei Jan 08 '14 at 19:44
  • No, I know how this works, but I want on show and on hide to animate the menu with a slide effect like go from left -200 to left :0 and then from 0 back to -200 if you need to hide – Johnny000 Jan 08 '14 at 20:05
  • So you want to slide out menu when `ToogleMenu()` is called but this has nothing to do with `ng-hide="menuTogglestate"`? – Daiwei Jan 08 '14 at 20:12
  • I want to bind it to the show and hide parameter as shown here http://docs.angularjs.org/api/ng.directive:ngShow#usage_animations but with javascript animation and not css keyframe animation – Johnny000 Jan 08 '14 at 20:24

1 Answers1

1

Assuming your module variable is app

app.animation('#menu', function() {
  return {

    beforeAddClass : function(element, className, done) {
      if(className == 'ng-hide') {
        jQuery(element).animate({left: -200}, done);
      }
      else {
        done();
      }
    },

    removeClass : function(element, className, done) {
      if(className == 'ng-hide') {
        jQuery(element).css({left: -200}).animate({left: 0}, done);
      }
      else {
        done();
      }
    }

  };
});
Daiwei
  • 40,666
  • 3
  • 38
  • 48