angularjs实现原生APP页面切换效果

最新推荐文章于 2021-06-05 05:18:02 发布

向然

最新推荐文章于 2021-06-05 05:18:02 发布

阅读量957

点赞数

分类专栏： javascript 工作笔记文章标签： angularjs app

本文链接：https://blog.csdn.net/baidu_32519511/article/details/69267120

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

工作笔记

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<title>angularjs实现原生app页面切换效果</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="bootstrap.min.css">
		<script src="../bower_components/jquery/dist/jquery.js"></script>
		<script src="../bower_components/angular/angular.js"></script>
		<script src="../bower_components/angular-animate/angular-animate.js"></script>
		<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
		<script src="../bower_components/bootstrap/dist/js/bootstrap.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: '<div style="height:300px;background-color:red"></div>'
					})
					.state('main2', {
						url: '/main2',
						template: '<div style="height:300px;background-color:blue"></div>'
					});
			}]);

			app.controller('MyController', function($state) {
			
			});
		</script>
		<style type="text/css">
		.vue-container{
			position: relative;
		}
		   .view.ng-animate {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				min-height: 500px;
				transition: 0.3s ease-out all;
				will-change: transform;
				
			}
			
			 .view.ng-animate .fixed-bottom {
				opacity: 0;
			}
			
			 .view.ng-enter {
				transform: translateX(100%);
			}
			
			 .view.ng-enter.ng-enter-active,
			 .view.ng-leave {
				transform: translateX(0%);
			}
			
			 .view.ng-leave.ng-leave-active {
				transform: translateX(-100%);
			}
		</style>
	</head>

	<body ng-app="myapp" ng-controller="MyController">		
		<a href="#" ui-sref="main1">第一页</a>
		<a href="#" ui-sref="main2">第二页</a>
		<div class="vue-container">
		<div class="view" ui-view ng-cloak></div>
		</div>
	</body>
</html>

可以通过修改CSS样式来改变页面切换的动画效果！！

向然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs实现原生APP页面切换效果

angularjs实现原生app页面切换效果 var app = angular.module('myapp', ['ui.router', 'ngAnimate']); app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRou
复制链接

扫一扫