viste CSS scorrevole con ui-router

Sto cercando di ottenere lo stesso effetto di scorrimento in/out viste come si trova qui:viste CSS scorrevole con ui-router

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

Ive ha creato un plunker: http://plnkr.co/edit/ST49iozWWtYRYRdcGGQL?p=preview

Ma il mio intero ui-view scompare completamente quando copio il CSS dal link qui sopra e penso che potrebbe essere giù per la position: relative nel mio 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 necessario aggiungere:

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

Qualsiasi aiuto apprezzato.

fonte

2015-07-16 Oam Psy

Change

<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

spiegazione dettagliata si possono trovare qui:

Link and execute external JavaScript file hosted on GitHub

fonte

2015-07-16 07:58:30

grazie per questo, ma non sono sicuro di come questo risolva il mio problema? –

scusa, forse ho frainteso la tua domanda? hai visto il plnkr aggiornato? ti ho aperto plnkr e la pagina 1 scompare completamente. È questo il problema che vuoi risolvere? –

pensa che ci possa essere un po 'di confusione, sto cercando di far scorrere le mie viste dentro e fuori come sopra ... ma grazie per aver guardato sopra ... vedi qui con il CSS: http: // plnkr.co/edit/uML2qvz1szlIwts0FmEu? p = anteprima –

Penso che questo è quello che stai cercando: Plunkr

ho aggiunto le seguenti stili per rendere le animazioni funzionano:

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

ho usato trasformare invece di left perché per quanto ne so consente browser per accelerare l'animazione utilizzando GPU aumentare le prestazioni.

Spero di non mancare nulla.

fonte

2015-07-21 13:18:50

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

devo uso angolare 1.3.15 al posto di 1.2.9

HTML semplificato

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

e più 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; 
}

fonte

2015-07-24 02:45:42 allenhwkim

viste CSS scorrevole con ui-router

risposta

Problemi correlati