ngAnimate - 双向滑动

Question

我正在努力解决一个问题：我有一个包含x项数量的菜单。 在这个例子中，我有三个项目。

每个项目都有一个内容部分，所以通过点击菜单项，内容应滑动。

到目前为止，我所取得的成就，就是当你从“项目1”，并开始改变到“项目2”将做动画（从右向左滑动，如幻灯片幻灯片）

但是我想要反向效果，所以它会从右向左滑动从“项目2 “到”项目1“。 我只是无法弄清楚如何在两种方式下做到这一点。

所以我要求的是ngAnimate的某种旋转木马，所以我不必为这些动画返回jQuery。我想在使用AngularJS时从我的项目中删除jQuery。

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和阶级改变从slide-left到slide-right时转向较低的指数，反之亦然。

然而，对于消失元素ngIf隐藏类更新之前的元素，所以你需要推迟的过渡，以确保ngClass首先执行。一种方法是使用$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你可能想尝试他们的传送带组件。