CSS Раздвижные представления с помощью ui-router

Я пытаюсь добиться такого же эффекта от скольжения в/из просмотров, как здесь:

http://dfsq.github.io/ngView-animation-effects/app/#/page/1

Ive создал плункер: http://plnkr.co/edit/ST49iozWWtYRYRdcGGQL?p=preview

Но мой весь ui-view полностью исчезает, когда я копирую CSS из приведенной выше ссылки и думаю, что это может быть до 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');
});

Любая помощь была оценена.

Ответы

Ответ 1

Я думаю, что это то, что вы ищете: 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.

Надеюсь, я ничего не пропустил.

Ответ 2

Результат: 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;
}