animation example

by johnwun

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<div ng-app=app>

<h1>{{page.title()}}</h1>

<p> <a href="#/view1">View 1</a> |
    <a href="#/view2">View 2</a>
</p>

<hr>
    <ng-view ng-animate="{enter: 'animate-enter'}" >Loading...</ng-view>
<hr>
Footer

<!-- Inline Templates (Partials) -->
    
<script type=text/ng-template id=view1.html>
    <magic-view>
        <div>VIEW 1</div>
    </magic-view>
</script>

<script type=text/ng-template id=view2.html>
    <magic-view>
        <div>VIEW 2</div>
    </magic-view>
</script>


    

</div>

CSS

.animate-enter-setup {
 -webkit-transition: 1s linear all; /* Safari/Chrome */
 -moz-transition: 1s linear all; /* Firefox */
 -ms-transition: 1s linear all; /* IE10 */
 -o-transition: 1s linear all; /* Opera */
 transition: 1s linear all; /* Future Browsers */
 
 opacity: 0;
}
 

.animate-enter-setup.animate-enter-start {
 opacity: 1;
}

magic-view{
    display:block;
}

JavaScript

angular.module('app', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/view1', {templateUrl: 'view1.html'}).
                when('/view2', {templateUrl: 'view2.html'}).
                otherwise({redirectTo: '/view1'});
}]);

angular.module('app')
       .directive('magicView', function() {
        return {
            restrict: 'EA',
            replace: false,
            transclude: true,
            template: '<div ng-transclude><div>'
        };
    });