CSS Sliding Ansichten mit ui-Router

ich die gleiche Wirkung des Gleitens in/out Ansichten zu erreichen versuche, wie hier gefunden:CSS Sliding Ansichten mit ui-Router

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

Ive erstellt eine Plunker: http://plnkr.co/edit/ST49iozWWtYRYRdcGGQL?p=preview

Aber meine ganze ui-Ansicht verschwindet vollständig, wenn ich die CSS aus den obigen Link und denken, kopieren sie es bis auf den position: relative könnte in meinem 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 benötigt, um hinzuzufügen:

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

Jede Hilfe sehr geschätzt.

Quelle

2015-07-16 Oam Psy

ändern

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

zu:

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

Updated plnkr

Details explaination sind hier zu finden:

Link and execute external JavaScript file hosted on GitHub

Quelle

2015-07-16 07:58:30

Dank für diese, aber nicht sicher, wie das mein Problem löst? –

Entschuldigung, vielleicht habe ich dich missverstanden? Hast du den aktualisierten PLNKR gesehen? Ich habe dich geöffnet, PLNKR, und da page1 komplett verschwinden. Ist das das Problem, das du lösen willst? –

es denke, dass es einige Verwirrung geben kann, ich versuche, meine Ansichten zu erhalten, wie oben beschrieben ... aber danke für das Betrachten der oben .. siehe hier mit dem CSS: http: // plnkr.co/edit/uML2qvz1szlIwts0FmEu? p = Vorschau –

Ich denke, das ist das, was Sie suchen: Plunkr

Ich habe die folgenden Stile zu Animationen machen arbeiten:

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

verwendete ich statt left verwandeln, weil AFAIK ermöglicht es Browser-Animation zu beschleunigen GPU Leistung steigern.

Ich hoffe, ich vermisse nichts.

Quelle

2015-07-21 13:18:50

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

Ich habe Verwendung Angular 1.3.15 statt 1.2.9

Vereinfachtes HTML

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

und mehr 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; 
}

Quelle

2015-07-24 02:45:42 allenhwkim

CSS Sliding Ansichten mit ui-Router

Antwort

Verwandte Themen