9
मुझे ng-class के साथ कुछ अजीब समस्या है, और मुझे संदेह है कि इसे दौड़ की स्थिति के साथ करना है।एनजी-क्लास और एनीमेशन के साथ रेस हालत
यहाँ यहाँ यहाँ प्रासंगिक js कोड
self.slideLeft = function() {
if (self.end_index < self.list_of_stuff.length) {
self.direction = 'left';
debugger;
self.start_index = self.start_index + 4;
self.end_index = self.end_index + 4;
self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);
}
}
self.slideRight = function() {
if (self.start_index > 0) {
self.direction = 'right';
debugger;
self.start_index = self.start_index - 4;
self.end_index = self.end_index - 4;
self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);
}
}
है प्रासंगिक एचटीएमएल
<div class="stuff-wrapper">
<div class="stuff"
ng-class="bCtrl.directionClass()"
ng-repeat="stuff in bCtrl.display_list">
{{stuff}}
</div>
</div>
है यहाँ एनीमेशन है plunker example
है।
.left.ng-enter,
.left.ng-leave {
-webkit-transition: all 1s ease-in-out;
}
.left.ng-enter {
transition-delay: 0.7s;
opacity: 0;
left: 10%;
}
.left.ng-enter-active {
opacity: 1;
left: 0;
}
.left.ng-leave {
opacity: 1;
left: -10%;
}
.left.ng-leave-active {
left: -20%;
opacity: 0;
}
यह एक साधारण ऐप है जो संख्या की एक सूची को बाएं और दाएं स्लाइड करता है।
यदि बाएं बटन दबाया जाता है, तो संख्याएं बाएं रहती हैं।
यदि दायां बटन दबाया जाता है, तो संख्याएं सही होती हैं।
लेकिन हम देखते हैं कि यदि दिशा में कोई बदलाव आया है, तो नंबर पहले गलत दिशा में स्लाइड करेगा, और बाद की दिशा सही होगी।
मुझे संदेह था कि यह दौड़ की स्थिति के कारण है।
दरअसल, मुझे लगता है कि ng-class डीबगर का उपयोग करते हुए self.direction दिशा बदलने के ठीक बाद लागू नहीं होता है।
यह बहुत उत्सुक है।
इस से निपटने के लिए कोई तरीका है?