ngAnimate - Beide Richtungen gleiten

Question

Ich habe Probleme mit einem Problem: Ich habe ein Menü mit x-Menge von Elementen. In diesem Beispiel habe ich drei Elemente.

Jedes Element hat einen Inhaltsbereich, so, indem Sie auf dem Menüpunkt klicken, sollte der Inhalt in schieben.

Was ich bisher erreicht habe, ist, dass, wenn Sie von „Punkt 1“ fangen und Ändern zu "item 2" führt die Animation aus (gleitend von rechts nach links, wie eine Powerpoint-Folie)

Aber ich hätte auch gerne den umgekehrten Effekt, also würde es von rechts nach links gleiten, wenn ich von "Punkt 2" gehe "bis" Punkt 1 ". Ich kann es einfach nicht herausfinden, wie man das für beide Wege macht.

Also was ich frage ist eine Art Karussell mit ngAnimate, also muss ich nicht für diese Art von Animationen zurück zu jQuery zurückkehren. Ich möchte jQuery aus meinem Projekt herausschneiden, während ich AngularJS benutze.

console.clear(); 
 
var _app = angular.module("animate", ['ngAnimate']); 
 

 
_app.directive("animate", [function() { 
 
    return { 
 
    scope: {}, 
 
    template: '<div class="header">' + 
 
     ' \t \t <ul>' + 
 
     ' \t \t \t <li data-ng-repeat="item in items" data-ng-click="move($index)">' + 
 
     ' \t \t \t \t <div>{{item}}</div>' + 
 
     ' \t \t \t </li>' + 
 
     ' \t \t </ul>' + 
 
     '</div>' + 
 
     '<div class="wrapper" style="position: relative; margin-top: 20px;">' + 
 
     ' \t \t <div data-ng-if="index == 0" class="slide slide-left">Content 1</div>' + 
 
     ' \t \t <div data-ng-if="index == 1" class="slide slide-left">Content 2</div>' + 
 
     ' \t \t <div data-ng-if="index == 2" class="slide slide-left">Content 3</div>' + 
 
     '</div>', 
 
    link: function(scope, elem, attr) { 
 
     scope.items = ["Item 1", "Item 2", "Item 3"] 
 
     scope.index = 0; 
 

 
     scope.move = function(index) { 
 
     scope.index = index; 
 
     } 
 
    } 
 
    } 
 
}]);

body { 
 
    font-family: Arial, Sans-Serif; 
 
} 
 

 
.header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: lightblue; 
 
    position: relative; 
 
} 
 

 
.header ul { 
 
    padding: 0; 
 
    height: inherit; 
 
} 
 

 
.header ul li { 
 
    display: inline; 
 
    width: 33%; 
 
    height: inherit; 
 
} 
 

 
.header ul li div { 
 
    float: left; 
 
    width: 33%; 
 
    text-align: center; 
 
    height: inherit; 
 
    border: 1px solid black; 
 
} 
 

 
.slide { 
 
    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
 
    -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
 
    -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
 
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
 
    position: absolute; 
 
} 
 

 
.slide-left.ng-enter { 
 
    left: 100%; 
 
} 
 

 
.slide-left.ng-enter.ng-enter-active { 
 
    left: 0; 
 
} 
 

 
.slide-left.ng-leave { 
 
    left: 0; 
 
} 
 

 
.slide-left.ng-leave.ng-leave-active { 
 
    left: -100%; 
 
} 
 

 
.slide-right.ng-enter { 
 
    left: -100%; 
 
} 
 

 
.slide-right.ng-enter.ng-enter-active { 
 
    left: 0 
 
} 
 

 
.slide-right.ng-leave { 
 
    left: 0; 
 
} 
 

 
.slide-right.ng-leave.ng-leave-active { 
 
    left: 100%; 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
 
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script> 
 
<div ng-app="animate"> 
 
    <animate></animate> 
 
</div>

Answer 1

Um ein Karussell Effekt zu haben, müssen Sie die Dia-Klasse wechseln, basierend auf dem Index, den Sie sind übergehen, so dass Sie ngClass verwenden und die Klasse slide-left-slide-right ändern, wenn in einen niedrigeren Index wechseln und umgekehrt.

jedoch für das verschwindende Element der ngIf versteckt das Element vor die Klasse aktualisiert wird, so dass Sie die Übergänge verzögern, müssen sicherstellen, ngClass zuerst ausgeführt wird. Eine Möglichkeit dazu besteht darin, die Funktion $timeout zu verwenden, die in Ihre Anweisung eingefügt werden muss.

Ihr Code wird:

_app.directive("animate", ['$timeout', function($timeout) { 
    return { 
    scope: {}, 
    template: '<div class="header">' + 
     '  <ul>' + 
     '   <li data-ng-repeat="item in items" data-ng-click="move($index)">' + 
     '    <div>{{item}}</div>' + 
     '   </li>' + 
     '  </ul>' + 
     '</div>' + 
     '<div class="wrapper" style="position: relative; margin-top: 20px;">' + 
     '  <div data-ng-if="index == 0" class="slide" ng-class="slideClass">Content 1</div>' + 
     '  <div data-ng-if="index == 1" class="slide" ng-class="slideClass">Content 2</div>' + 
     '  <div data-ng-if="index == 2" class="slide" ng-class="slideClass">Content 3</div>' + 
     '</div>', 
    link: function(scope, elem, attr) { 
     scope.items = ["Item 1", "Item 2", "Item 3"] 
     scope.index = 0; 
     scope.slideClass = 'slide-left'; 

     scope.move = function(index) { 
     scope.slideClass = index < scope.index 
         ? scope.slideClass = 'slide-right' 
         : scope.slideClass = 'slide-left'; 

     $timeout(function() { 
      scope.index = index; 
     }); 
     } 
    } 
    } 
}]); 

prüfen this sample.

Auch, wenn Sie bereits UI Bootstrap haben, möchten Sie vielleicht ihre Karussell-Komponente versuchen.