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

最新推荐文章于 2017-12-19 22:15:00 发布

timelessmemoryli

最新推荐文章于 2017-12-19 22:15:00 发布

阅读量5.1k

点赞数

分类专栏： Angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/u014788227/article/details/50474343

版权

本文介绍如何在AngularJS中使用UI-View实现页面切换时的平滑动画效果，通过示例代码展示了不同页面（如首页、联系我们、关于我们）之间的过渡动画，提升用户体验。

摘要由CSDN通过智能技术生成

<!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-ui-router.js"></script>
        <script src="angular-animate.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', ['ui.router', 'ngAnimate']);
            app.config(function($stateProvider) {

                $stateProvider

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

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