带有 ui-router 的 CSS 滑动视图
Posted
技术标签:
【中文标题】带有 ui-router 的 CSS 滑动视图【英文标题】：CSS Sliding views with ui-router 【发布时间】：2015-10-05 12:41:21 【问题描述】：我正在尝试实现与此处的滑入/滑出视图相同的效果：
http://dfsq.github.io/ngView-animation-effects/app/#/page/1
我创建了一个 plunker：http://plnkr.co/edit/ST49iozWWtYRYRdcGGQL?p=preview
但是当我从上面的链接复制 CSS 并认为它可能归结为 container 中的 position: relative 时，我的整个 ui 视图完全消失了
CSS：
*,
*:after,
*:before
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
html
font-size: 62.5%;
min-height: 100%;
position: relative;
html body
font-size: 140%;
line-height: 1.5;
margin: 0;
padding: 0 0;
margin-bottom: 60px;
.container
max-width: 430px;
margin: 0 auto;
position: relative;
display: block;
float: none;
overflow: hidden;
.l-one-whole
width: 100%;
form
background: #f0f0f0;
height: 350px;
padding: 10px;
font-size: 1.4em;
需要添加的CSS：
.slide
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
.slide.ng-enter,
.slide.ng-leave
-webkit-transition: all 1s ease;
transition: all 1s ease;
.slide.ng-enter
left: 100%;
.slide.ng-enter-active
left: 0;
.slide.ng-leave
left: 0;
.slide.ng-leave-active
left: -100%;
HTML：
<body ng-controller="MainCtrl">
<ul>
<li><a href="#/view1">view1</a>
</li>
<li><a href="#/view2">view2</a>
</li>
</ul>
<main class="l-one-whole">
<section class="container">
<article class="l-one-whole">
<div ui-view class="slide"></div>
</article>
</section>
</main>
</body>
JS：
var app = angular.module('plunker', ['ui.router', 'ngAnimate']);
app.config(function($stateProvider, $urlRouterProvider)
$stateProvider
.state('view1',
url: '/view1',
templateUrl: 'page1.html'
)
.state('view2',
url: '/view2',
templateUrl: 'page2.html'
);
$urlRouterProvider.otherwise('/view1');
);
任何帮助表示赞赏。
【问题讨论】：
【参考方案1】：结果：http://plnkr.co/edit/vhGSiA?p=preview
我使用的是 Angular 1.3.15 而不是 1.2.9
简化的 HTML
<section class="container">
<div ui-view class="slide-left"></div>
</section>
以及更多 CSS
.container
overflow: hidden;
position: relative;
.slide-left.ng-enter, .slide-left.ng-leave
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transition: transform .7s ease-in-out;
.slide-left.ng-enter
z-index: 101;
transform: translateX(100%);
.slide-left.ng-enter.ng-enter-active
transform: translateX(0);
.slide-left.ng-leave
z-index: 100;
transform: translateX(0);
.slide-left.ng-leave.ng-leave-active
transform: translateX(-100%);
form /* contents within ui-view */
position:absolute;
【讨论】：
【参考方案2】：我想这就是你要找的东西：Plunkr
我添加了以下样式来制作动画：
/* Transition effects */
.l-one-whole
position: relative;
overflow: hidden;
min-height: 400px;
.slide
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.slide.ng-enter,
.slide.ng-leave
transition: all 1s ease;
.slide.ng-enter
transform: translate(100%, 0);
.slide.ng-enter-active
transform: translate(0, 0);
.slide.ng-leave
transform: translate(0, 0);
.slide.ng-leave-active
transform: translate(-100%, 0);
我使用变换而不是 left，因为 AFAIK 它使浏览器能够使用 GPU 来加速动画，从而提高性能。
我希望我没有遗漏任何东西。
【讨论】：
【参考方案3】：改变
<script src="https://raw.github.com/dlukez/ui-router/angular-1.2/release/angular-ui-router.js"></script>
到：
<script src="https://cdn.rawgit.com/dlukez/ui-router/angular-1.2/release/angular-ui-router.js"></script>
Updated plnkr
详细解释可以在这里找到：
Link and execute external javascript file hosted on GitHub
【讨论】：
谢谢，但不确定这如何解决我的问题？ 对不起，也许我误解了你的问题？你看到更新的 plnkr 了吗？我打开了你的 plnkr，然后 page1 完全消失了。这就是你要解决的问题吗？ 它认为可能存在一些混乱，我正试图让我的观点像上面那样滑入和滑出......但感谢您查看上述内容......请参阅此处的 CSS： plnkr.co/edit/uML2qvz1szlIwts0FmEu?p=preview 查看滑动视图示例：dfsq.github.io/ngView-animation-effects/app/#/page/1 你应该通过开发者工具检查他的 css 定义（app.css）。实际上添加一个幻灯片类是不够的。以上是关于带有 ui-router 的 CSS 滑动视图的主要内容，如果未能解决你的问题，请参考以下文章
Angular UI-Router，父 ui-view 渲染，但带有模板的子视图不渲染