带有 ui-router 的 CSS 滑动视图答案

【问题标题】：CSS Sliding views with ui-router带有 ui-router 的 CSS 滑动视图
【发布时间】：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');
});

任何帮助表示赞赏。

【问题讨论】：

标签： angularjs css angular-ui-router

【解决方案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）。实际上添加一个幻灯片类是不够的。