CSS Sliding views with ui-router

Question

I am trying to achieve the same effect of sliding in/out views as found here:

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

Ive created a plunker: http://plnkr.co/edit/ST49iozWWtYRYRdcGGQL?p=preview

But my entire ui-view completely disappears when i copy the CSS from the link above and think it could be down to the position: relative in my 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 needed to add:

.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');
});

Any help appreciated.

Umut Benzer · Accepted Answer · 2015-07-21 13:18:50Z

12

+25

I think this is what you are looking for: Plunkr

I added the following styles to make animations work:

/* 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);
}

I used transform instead of left because AFAIK it enables browser to accelerate animation using GPU increasing performance.

I hope I am not missing anything.

answered Jul 21, 2015 at 13:18

Umut Benzer

3,5266 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

allenhwkim · Accepted Answer · 2015-07-24 02:52:56Z

7

Result: http://plnkr.co/edit/vhGSiA?p=preview

I have use Angular 1.3.15 instead of 1.2.9

Simplified HTML

  <section class="container">
    <div ui-view class="slide-left"></div>
  </section>

and more 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;
}

edited Jul 24, 2015 at 2:52

answered Jul 24, 2015 at 2:45

allenhwkim

27.8k18 gold badges93 silver badges128 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:23Z

4

Change

<script src="https://raw.github.com/dlukez/ui-router/angular-1.2/release/angular-ui-router.js"></script>

to:

<script src="https://cdn.rawgit.com/dlukez/ui-router/angular-1.2/release/angular-ui-router.js"></script>

Updated plnkr

Detail explaination can be found here:

Link and execute external JavaScript file hosted on GitHub

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jul 16, 2015 at 7:58

huan feng

8,7043 gold badges40 silver badges66 bronze badges

5 Comments

Oam Psy Over a year ago

thanks for this, but not sure how this solves my issue?

huan feng Over a year ago

sorry, maybe i misunderstood you question? did you see the updated plnkr? i opened you plnkr,and there page1 completely disappear. Is that the problem you want to solve?

Oam Psy Over a year ago

it think there may be some confusion, i am trying to get my views to slide in and out like the above above... but thanks for looking at the above.. see here with the CSS: plnkr.co/edit/uML2qvz1szlIwts0FmEu?p=preview

Oam Psy Over a year ago

see example of sliding views: dfsq.github.io/ngView-animation-effects/app/#/page/1

huan feng Over a year ago

you should check his css definitions(app.css) via developer tools. actually add a slide class is not enough.

Collectives™ on Stack Overflow

CSS Sliding views with ui-router

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related