Angularjs – Angular JS slide animation

angularjsangularjs-directive

I'm using v 1.1.4 so that I can use the ng-animate directive with ng-show.

I've got a fade working great on one part of my app, but having a bit of trouble getting a slide in panel to behave.

If I take the 'right: 0;' off the targetDiv, then it slides in nicely, but then when the animation is complete, it jumps to the left side of the screen (as expected, as the classes are removed on complete).

But if I keep the 'right: 0;' on the .targetDiv then the animation never runs, and it simply just shows the div, rather than sliding it.

I'd put together a fiddle, but can't seem to get it working with the CDN version of 1.1.4

Any help much appreciated!

CSS

.slideFromRight-show-setup {
  -moz-transition:all 0.5s ease-in-out;
  -webkit-transition:all 0.5s ease-in-out; 
  transition:all 0.5s ease-in-out;
}

.slideFromRight-show-setup {
  right: -100%;
}

.slideFromRight-show-setup.slideFromRight-show-start {
  right: 0;
}

.targetDiv {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: red;
}

HTML

<div class="targetDiv" ng-show="detailPanel.visible" ng-animate="'slideFromRight'">Content</div>

Best Solution

I've worked out that the ng-animate directive doesn't work very well for CSS properties that don't have a default - it works great for opacity (where the default opacity is 100%), but not for absolutely positioned right: 0; as right is not 0 in default state.

Using both the JS & CSS3 parts of ng-animate (http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate) means that I can do a dirty hack to get a class added on complete, then removed on hide:

myApp.animation('slideFromRight-show', function() {
  return {
    setup : function(element) {
    },
    start : function(element, done, memo) {
      var timer = setTimeout(function(){
        element.addClass("opened");
        done();
      }, 500);
    }
  };
});

myApp.animation('slideFromRight-hide', function() {
  return {
    setup : function(element) {
      element.removeClass("opened");
    },
    start : function(element, done, memo) {
      var timer = setTimeout(function(){
        done();
      }, 500);
    }
  };
});

This feels dirty, and if someone can come up with a better answer, that would be ace - but this works for the prototype I'm building right now.

Related Question