ngAnimate - Trượt cả hai cách

Question

Tôi đang gặp khó khăn với một vấn đề: Tôi có một menu với số lượng mặt hàng x. Trong ví dụ này, tôi có ba mục.

Mỗi mục có một phần nội dung, vì vậy bằng cách nhấp vào mục menu, nội dung nên trượt trong.

Những gì tôi đã đạt được cho đến nay, là khi bạn đang bắt đầu từ "mục 1" và thay đổi đến "mục 2" sẽ thực hiện hoạt ảnh (trượt từ phải sang trái, như trang trình bày powerpoint)

Nhưng tôi cũng muốn hiệu ứng ngược lại, vì vậy nó sẽ trượt từ phải sang trái khi chuyển từ "mục 2 "tới" mục 1 ". Tôi không thể tìm ra cách để làm điều này cho cả hai cách.

Vì vậy, những gì tôi yêu cầu là một loại băng chuyền với ngAnimate, vì vậy tôi sẽ không phải quay trở lại jQuery cho các loại hoạt ảnh này. Tôi muốn cắt bỏ jQuery từ dự án của tôi trong khi sử dụng AngularJS.

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

Để có tác dụng băng chuyền, bạn cần phải chuyển đổi các lớp trượt dựa trên các chỉ số bạn đang chuyển sang, vì vậy bạn sử dụng ngClass và thay đổi lớp slide-left-slide-right khi chuyển sang chỉ số thấp hơn và ngược lại.

Tuy nhiên, đối với các yếu tố biến mất các ngIf ẩn các yếu tố trước lớp được cập nhật, vì vậy bạn cần phải trì hoãn việc chuyển tiếp để đảm bảo ngClass được thực hiện đầu tiên. Một cách để làm điều đó là sử dụng hàm $timeout, cần được đưa vào chỉ thị của bạn.

Mã của bạn trở thành:

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

Kiểm tra this sample.

Ngoài ra, nếu bạn đã có UI Bootstrap, bạn có thể muốn thử thành phần băng chuyền của chúng.