ngView页面切换动画(ng-view)

最新推荐文章于 2024-04-05 16:05:36 发布

原创最新推荐文章于 2024-04-05 16:05:36 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

Angularjs 专栏收录该内容

55 篇文章

订阅专栏

这篇博客探讨了如何在AngularJS应用中使用ngView实现页面切换时的动画效果。通过实例展示了在page-home.html、page-about.html和page-contact.html之间切换时，如何添加动画以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="angular-animate.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', ['ngRoute', 'ngAnimate']);
            app.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'
                    });

            });

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

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

            // contact page controller
            app.controller('contactController', function($scope) {
                $scope.pageClass = 'page-contact';
            });
        </script>
        <style type="text/css">
            .page-home {
                background:#00D0BC; color:#00907c;
            }

            .page-about {
                background:#E59400; color:#a55400;
            }

            .page-contact {
               background:#ffa6bb; color:#9e0000;
            }

            .page {
                bottom:0;
                padding-top:200px;
                position:absolute;
                text-align:center;
                top:0;
                width:100%;
            }

            .page h1 {
                font-size:60px;
            }

            .page a {
                margin-top:50px;
            }

            /* 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 { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
            .ng-leave { animation: rotateFall 0.5s both ease-in; z-index: 9999; }

            /*.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="myapp">
        <div class="page {{ pageClass }}" ng-view></div>
    </body>

</html>

page-home.html

<h1>Angular Animations</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>

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>