angular animation api experiment

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.js"></script>
<div>
    <foo >
        <button ng-click="handle()">handle</button>
    </foo>
</div>

SCSS

foo {
    width :400px;
    background : pink;
    overflow : hidden;
    display : block;
}
.cow.ng-enter {
    transition : 0.5s all linear;
    position : relative;
    opacity : 0;
    left : 100%;
}
.cow.ng-enter.ng-enter-active {
    left : 0;
    opacity : 1;
}

JavaScript

angular.module('myapp', ['ngAnimate'])

angular.module('myapp').directive('foo', ['$animate', function ($animate) {
    return {
        link : function(scope, element) {
            scope.handle = function () {
                $animate.enter(angular.element('<div class="cow">enter</div>'), element);
            }
        }
    };
}]);

angular.bootstrap(document, ['myapp']);