Angularjs 页面切换动画(ui-view)

来源：互联网发布：路由器封掉微信端口编辑：程序博客网时间：2024/06/06 03:42

上一篇编辑不了，只能重开一篇。

<!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-animate.js"></script>
        <script src="angular-ui-router.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', ['ui.router', 'ngAnimate']);
            app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
            {
                // $urlRouterProvider.when('', '/main1')
                // .otherwise('/main1');
                $stateProvider
                .state('main1', {
                    url: '/main1',
                    template: 'hello world1'
                })
                .state('main2', {
                    url: '/main2',
                    template: 'hello world2'
                });
            }]);

            app.controller('MyController', function($state) {
                $state.go('main1');
            });
            app.animation('.fad', function () {
              return {
                enter: function(element, done) {
                      element.css({
                        opacity: 0
                      });
                      element.animate({
                        opacity: 1
                      }, 1000, done);
                    },
                leave: function (element, done) {
                    element.css({
                        opacity: 1
                    });
                    element.animate({
                        opacity: 0
                    }, 1000, done);
                }
              };
            });
        </script>
    </head>
    <body ng-app="myapp" ng-controller="MyController">
        <h1>hello world</h1>
        <a href="#" ui-sref="main1">click1</a>
        <a href="#" ui-sref="main2">click2</a>
        <div class="fad" ui-view></div>
    </body>
</html>

0 0