ngAnimate - दोनों तरीकों से

Question

मैं एक मुद्दा के साथ संघर्ष कर रहा हूँ स्लाइडिंग: मैं मदों की एक्स राशि के साथ एक मेनू है। इस उदाहरण में, मैं तीन आइटम नहीं हैं।

प्रत्येक आइटम एक सामग्री अनुभाग है, तो मेनू आइटम पर क्लिक करके, सामग्री में स्लाइड चाहिए।

मैं अब तक क्या हासिल किया है, जिसे आप "आइटम 1" से शुरू कर रहे हैं कि कब और बदल रहा है "आइटम 2" करने के लिए एनीमेशन (दाएं से बाएं, एक पावरपॉइंट स्लाइड की तरह स्लाइडिंग)

लेकिन मुझे रिवर्स इफेक्ट भी चाहिए, इसलिए यह "आइटम 2 से जाने पर दाएं से बाएं स्लाइड करेगा "टू" आइटम 1 "। मैं सिर्फ यह कैसे दोनों तरीकों के लिए यह करने के लिए पता नहीं कर सकते हैं।

तो मैं जो कुछ मांग रहा हूं वह एनजीएनिम के साथ कुछ प्रकार का कैरोसेल है, इसलिए मुझे इस तरह के एनिमेशन के लिए 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 आप अपने हिंडोला घटक की कोशिश करना चाहते हो सकता है।