CODEWITHSUNDEEP
angularjs
Chris Barr
Chris Barr

Reputation: 34125

AngularJS animation addClass for transitions

I have an AngularJS directive where I want to click something, an element gets created, and uses CSS animations to transitions from one size/position to another.

Non-functional demo here: http://jsfiddle.net/ChrisMBarr/xv23s73f/4/

Right now I am doing the following, which I found in the ngAnimate documentation

$animate.addClass($box, "transitioning",{
   from:{
      width: $element.width(),
      height: $element.height(),
      top: $element.offset().top,
      left: $element.offset().left
   }
});

and this is what my CSS looks like:

.fancy-box{
    background: red;
    position: absolute;

}

.transitioning{
  -webkit-transition: all 0.3s;
       -o-transition: all 0.3s;
          transition: all 0.3s;   

      top: 10px;
    right: 10px;
    width: 100px;
   height: 100px;
}

Basically, my transitioning class is not being applied, and the styles are not being set, so nothing is animating. What am I missing here?

Upvotes: 2

Views: 900

Answers (1)

Real John Connor
Real John Connor

Reputation: 445

The main problem is that you are calling $animate.addClass from inside the click handler. If you do this, then you need to follow it up with a $scope.$apply. Otherwise, angular doesn't know that it needs to do anything.

testApp.directive("makeBigger", ["$animate", function ($animate) {
     return {
        restrict: "A",
        scope: true,
        link: function ($scope, $element){
            $element.on("click", function (ev) {
                var $box = $("<div class='fancy-box'></div>").insertAfter($element);

                $animate.addClass($box, "transitioning",{
                    from:{
                        width: $element.width(),
                        height: $element.height(),
                        top: $element.offset().top,
                        left: $element.offset().left
                    }
                });
                $scope.$apply()
            });
        }
    };
}]);

Also, you should use transitioning-add in your css. From the docs: https://docs.angularjs.org/api/ngAnimate/service/$animate

angular first adds the class: foo-add and then foo and foo-add-active. I think the idea is to put the transition stuff into the foo-add class.

EDITED to take out bad advice about animate.enter It turns out angular enter is crazier than I remembered.

Upvotes: 2

Related Questions