लघु संस्करण बनानेयकीन है कि डोम परिवर्तन संक्रमण से पहले पूरा कर लें
जब (कुछ रास्ता है कि मैं पूरी तरह से नहीं समझ में ngAnimate का प्रयोग करके) कोई नया दृश्य करने के लिए यूआई-रूटर संक्रमण, यह कक्षाएं कहते हैं ng-leave और ng-leave-active वर्तमान दृश्य के लिए। यह अगले दृश्य में कक्षा ng-enter और ng-enter-active भी जोड़ता है। समस्या यह है कि अगले दृश्य में सभी डीओएम परिवर्तन समाप्त होने से पहले संक्रमण शुरू हो गया है, जिससे संक्रमण चकाचौंध हो सकता है। तो मेरा सवाल है; क्या ng-enter और ng-enter-active कक्षाओं को तब तक रोकना संभव है जब तक कि मैं तय नहीं करता कि उन्हें जोड़ा जाना चाहिए (नियंत्रक से किसी ईवेंट को प्रेषित करके, या ऐसे)?
लांग संस्करण
मैं एक AngularJS आवेदन जो ui-रूटर और बदलाव के लिए एनजी-चेतन का उपयोग करता है के विकास कर रहा हूँ। मैंने एक छोटी प्रदर्शन समस्या में भाग लिया है, जिसे मैं वास्तव में एप्लिकेशन को आसान बनाने के लिए हल करना चाहता हूं।
राज्यों के बीच संक्रमण स्टटरिंग प्रतीत होता है, और मुझे पता चला है कि यह शायद है क्योंकि संक्रमण के दौरान कोणीय संक्रमण होने के दौरान डीओएम-परिवर्तन कर रहा है।
मैं कैसे सुनिश्चित कर सकता हूं कि अगले दृश्य में डीओएम परिवर्तन संक्रमण करने से पहले समाप्त हो गया है? मैं यूई-राउटर के संकल्प फ़ंक्शन का उपयोग उन वादों के साथ कर रहा हूं जो डेटा लोड होने से पहले संक्रमण से होने से रोकते हैं।
मैंने JSFiddle बनाया है जो मेरी समस्या का वर्णन करता है। राज्य 2 दर्ज करने के लिए लिंक पर क्लिक करते समय, डेटा के साथ हल करने के लिए हल पंक्तियों के लिए कुछ समय लगता है (जैसा कि अपेक्षित है)। हालांकि, ऐसा लगता है कि जब संक्रमण होता है तो डोम तैयार होता है, क्योंकि संक्रमण काफी लगी हो सकती है। इससे मुझे लगता है कि जब संक्रमण होता है तो डोम तैयार नहीं होता है।
app.js
angular.module('myApp', ['ui.router', 'ngAnimate'])
.config(['$stateProvider',
function ($stateProvider) {
$stateProvider
.state('state1', {
url: '',
views: {
'main': {
templateUrl: "state1.html",
controller: function(){
}
}
}
})
.state('state2', {
url: '/state2',
views: {
'main': {
templateUrl: "state2.html",
controller: function($scope, rows){
$scope.rows = rows;
},
resolve: {
rows: function($q){
var rows = [];
var deferred = $q.defer();
for (var i = 0; i < 10000; i++){
rows.push({a: i, b: i/2, c: 3*i/2});
}
deferred.resolve(rows);
return deferred.promise;
}
}
}
}
});
}])
टेम्पलेट्स
<div ui-view="main" class="main"></div>
<script type="text/ng-template" id="state1.html">
<a ui-sref="state2">Go to state 2</a>
</script>
<script type="text/ng-template" id="state2.html">
<a ui-sref="state1">Back to state 1</a>
<table>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr ng-repeat="row in rows">
<td>{{row.a}}</td>
<td>{{row.b}}</td>
<td>{{row.c}}</td>
</tr>
</table>
</script>
सीएसएस
.main{
transition: all 1s ease;
position: absolute;
width: 100%;
}
.main.ng-enter{
transform: translateX(30%);
opacity: 0;
}
.main.ng-enter.ng-enter-active{
transform: translateX(0);
opacity: 1;
}
.main.ng-leave{
transform: translateX(0);
opacity: 1;
}
.main.ng-leave.ng-leave-active{
transform: translateX(-30%);
opacity: 0;
}
अरे एंटोन, क्या आप अपने तत्वों के बारे में थोड़ा और विशिष्ट हो सकते हैं और यह कब हो रहा है? शायद कुछ कोड मदद करेगा! – bobleujr
हाय @ बॉबलेजर! मैंने अपने प्रश्न को दोनों कोड के साथ जेएसएफडल के लिए एक लिंक अपडेट किया है! –
मैंने अपनी समस्या के एक छोटे संस्करण के साथ प्रश्न फिर से अद्यतन किया है! –