Когда пользователь нажимает на гиперссылку, и я меняю ng-view, в первый раз это занимает больше времени, но в следующий раз переход от одного вида к другому является плавным без каких-либо задержек. Я собрал образец plunker здесь: http://plnkr.co/edit/cINyIOpJBEAsa2pUk3tP?p=preview
app.js из этого plunker выглядит так:
var sampleApp = angular.module('sampleApp', [
'ngRoute',
'ngAnimate'
]);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/ShowOrder/:orderId', {
templateUrl: 'templates/show_order.html',
controller: 'ShowOrderController'
});
}
]);
sampleApp.controller('ShowOrderController', function($scope, $routeParams) {
$scope.order_id = $routeParams.orderId;
});
sampleApp.animation('.content',
function() {
return {
enter: function(element, done) {
var delay = $('.content').length === 2 ? 600 : 0; // if there are 2 .content (ngView) delay entrance, so the 1st can leave
$(element).css({
opacity: 0 // set the stage
});
$(element).delay(delay).animate({ // animate the opacity with delay if needed
opacity: 1
}, 600, done);
},
leave: function(element, done) {
$(element).css({
position: 'absolute', // use position absolute so the element won't jump down
opacity: 1 // set the stage
});
$(element).animate({
opacity: 0
}, 600, done);
}
}
}
)
В моем корпоративном приложении эта начальная задержка более заметна для пользователя из-за большего количества данных и инициализации переменных, которые я делаю.
Любой способ сделать его более плавным?
Начальная задержка вызвана запросом шаблона маршрута. Его можно устранить, скопировав шаблоны раньше,
sampleApp.run(function ($http, $templateCache) {
$http.get('templates/show_order.html', { cache: $templateCache });
});
Или путем конкатенации шаблонов во время фазы сборки с помощью угловых шаблонов или grunt-html2js.