ngAnimate - 양방향 슬라이딩

Question

문제가 있습니다. 항목 수가 많은 메뉴가 있습니다. 이 예에서는 세 가지 항목이 있습니다.

각 항목은 메뉴 항목을 클릭하여, 그래서 내용에 밀어해야합니다.

내가 지금까지 달성 한 무엇

, 당신은 "항목 1"에서 시작하여 변화하는 때이다, 콘텐츠 섹션이 "항목 2"로 이동하면 애니메이션이 수행됩니다 (오른쪽에서 왼쪽으로 슬라이드, 파워 포인트 슬라이드처럼)

역 효과도 좋으므로 "항목 2 "항목"1 ". 두 가지 방법으로이 작업을 수행하는 방법을 알 수 없습니다.

그래서 내가 원하는 것은 ngAnimate를 사용하는 일종의 회전식 슬라이드이므로 이러한 종류의 애니메이션을 위해 jQuery로 돌아갈 필요가 없습니다. AngularJS를 사용하는 동안 내 프로젝트에서 jQuery를 자르고 싶습니다. 당신이 ngClass을 사용하고 slide-left에서 slide-right 때 클래스를 변경할 수 있도록

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

은 회전 목마 효과를 위해, 당신은, 당신이 전환되는 인덱스에 따라 슬라이드 클래스를 전환해야 낮은 지수로 이동하고 그 반대의 경우도 마찬가지입니다. 당신이 ngClass이 먼저 실행되고 있는지 확인 전환을 지연 할 수 있도록

그러나, 사라지는 요소 ngIf를 들어, 클래스가 업데이트 전에 요소 을 숨 깁니다. 이를 수행하는 한 가지 방법은 지시문에 삽입해야하는 $timeout 함수를 사용하는 것입니다.

코드는된다 :

_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; 
     }); 
     } 
    } 
    } 
}]); 

확인 this sample.

또한 이미 UI Bootstrap 사용자는 회전식 구성 요소를 사용해 볼 수 있습니다.