ngAnimate学习记录

在ui-view 上使用,突出页面切换的效果,比较简单

html,css样式也写在里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="jslibs/bootstrap-3.3.5-dist/css/bootstrap.min.css">

    <script src="jslibs/angular-1.2.29/angular.min.js"></script>
    <script src="jslibs/angular-1.2.29/angular-animate.min.js"></script>
    <script src="jslibs/angular-1.2.29/angular-route.min.js"></script>
    <style type="text/css">
        /* make our pages be full width and full height */
        /* positioned absolutely so that the pages can overlap each other as they enter and leave */
 .page        {
            
          
            position:absolute;
            text-align:center;

            width:100%;
        }

        .page h1     { font-size:60px; }
        .page a     { margin-top:50px; }

        /* PAGES (specific colors for each page)
        ============================================================================= */
 .page-home         { background:#00D0BC; color:#00907c; }
        .page-about     { background:#E59400; color:#a55400; }
        .page-contact     { background:#ffa6bb; color:#9e0000; }
        /* ANIMATIONS
============================================================================= */

        /* leaving animations ----------------------------------------- */
        /* rotate and fall */
 @keyframes rotateFall {
            0%         { transform: rotateZ(0deg); }
            20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
            40%     { transform: rotateZ(17deg); }
            60%     { transform: rotateZ(16deg); }
            100%     { transform: translateY(100%) rotateZ(17deg); }
        }

        /* slide in from the bottom */
 @keyframes slideOutLeft {
            to         { transform: translateX(-100%); }
        }

        /* rotate out newspaper */
 @keyframes rotateOutNewspaper {
            to         { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
        }

        /* entering animations --------------------------------------- */
        /* scale up */
 @keyframes scaleUp {
            from     { opacity: 0.3; -webkit-transform: scale(0.8); }
        }

        /* slide in from the right */
 @keyframes slideInRight {
            from     { transform:translateX(100%); }
            to         { transform: translateX(0); }
        }

        /* slide in from the bottom */
 @keyframes slideInUp {
            from     { transform:translateY(100%); }
            to         { transform: translateY(0); }
        }
        .ng-enter         { z-index: 8888; }
        .ng-leave         { z-index: 9999; }

        /* page specific animations ------------------------ */

        /* home -------------------------- */
 .page-home.ng-enter         { animation: scaleUp 0.5s both ease-in; }
        .page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }

        /* about ------------------------ */
 .page-about.ng-enter         { animation:slideInRight 0.5s both ease-in; }
        .page-about.ng-leave        { animation:slideOutLeft 0.5s both ease-in; }

        /* contact ---------------------- */
 .page-contact.ng-leave      { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
        .page-contact.ng-enter         { animation:slideInUp 0.5s both ease-in; }

    </style>
</head>
<body ng-app="animateApp">
    <div class="page {{ pageClass }}" ng-view></div>
</body>
</html>
<script>
    var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);
    animateApp.config(function($routeProvider) {

        $routeProvider

            // home page
 .when('/', {
                    templateUrl: 'page-home.html',
                    controller: 'mainController'
 })

            // about page
 .when('/about', {
                    templateUrl: 'page-about.html',
                    controller: 'aboutController'
 })

            // contact page
 .when('/contact', {
                    templateUrl: 'page-contact.html',
                    controller: 'contactController'
 });

    });
    // CONTROLLERS ============================================
    // home page controller
 animateApp.controller('mainController', function($scope) {
        $scope.pageClass = 'page-home';
    });

    // about page controller
 animateApp.controller('aboutController', function($scope) {
        $scope.pageClass = 'page-about';
    });

    // contact page controller
 animateApp.controller('contactController', function($scope) {
        $scope.pageClass = 'page-contact';
    });
</script>
<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
 <!-- page-contact.html -->
<h1>Tons of Animations</h1>
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>
 <!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

页面切换有简单的效果,还是不错的

你可能感兴趣的:(ngAnimate)