Oam*_*Psy 10 css css3 angularjs angular-ui-router
我试图实现滑入/退出视图的相同效果,如下所示:
http://dfsq.github.io/ngView-animation-effects/app/#/page/1
我创建了一个plunker:http://plnkr.co/edit/ST49iozWWtYRYRdcGGQL？p = preview
但是当我从上面的链接复制CSS时,我的整个ui视图完全消失了,并认为它可以归结为position: relative我的container
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');
});
任何帮助赞赏.
Umu*_*zer 12
我想这就是你要找的东西: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提高性能来加速动画.
我希望我没有遗漏任何东西.
结果: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;
}
改变
<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>
详细解释可以在这里找到：
链接并执行 GitHub 上托管的外部 JavaScript 文件
| 归档时间： |
|
| 查看次数： |
4218 次 |
| 最近记录： |