I'm going to develop a hybrid App using Phonegap + Durandal. So far I'm developing a classic Webapp and planing to do the switch to hybrid as soon as I'm satisfied with the feature set of the app.
I realized so far that the transitions Durandal is executing when switching from one view to another are pretty sloppy and non-fluid when using my Nexus 4 or Nexus 7 Tablet.
Does anyone have an idea how to speed it up? The final option will be to turn of transitions at all but that would be pretty sad =(
Update: Ok found out that e.g. entrance.js seems to use Javascript Animations instead of CSS3 animations. guess thats where to start fixing
I did use this library: css3 transit is much faster that default
and change the entrance.js (probably you need to adapt for you but this worked for me)
define(['../system'], function(system) {
var fadeOutDuration = 100;
var entrance = function(parent, newChild, settings) {
return system.defer(function(dfd) {
function endTransition() {
dfd.resolve();
}
function scrollIfNeeded() {
if (!settings.keepScrollPosition) {
$(document).scrollTop(0);
}
}
if (!newChild) {
scrollIfNeeded();
if (settings.activeView) {
$(settings.activeView).transition({
opacity: 1,
scale: 0.3,
duration: duration,
easing: 'in',
complete: function(){
$(settings.activeView).css('display' ,'none');
if (!settings.cacheViews) {
ko.virtualElements.emptyNode(parent);
}
endTransition();
}
});
} else {
if (!settings.cacheViews) {
ko.virtualElements.emptyNode(parent);
}
endTransition();
}
} else {
var $previousView = $(settings.activeView);
var duration = settings.duration || 500;
function startTransition() {
scrollIfNeeded();
if (settings.cacheViews) {
if (settings.composingNewView) {
ko.virtualElements.prepend(parent, newChild);
}
} else {
ko.virtualElements.emptyNode(parent);
ko.virtualElements.prepend(parent, newChild);
}
var startValues = {
//marginLeft: '90%',
//marginRight: '-20px',
opacity: 0,
scale: 0.3,
display: 'block'
};
var endValues = {
//marginRight: 0,
//marginLeft: 0,
opacity: 1,
scale: 1
};
$(newChild).page();
$(newChild).trigger('create');
$(newChild).css(startValues);
$(newChild).transition(
{
marginRight: 0,
marginLeft: 0,
opacity: 1,
scale: 1,
duration: duration,
easing: 'in',
complete: endTransition
});
//startValues,500, 'ease');
//$(newChild).transition(endValues, duration, 'swing', endTransition);
//$(newChild).transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});
//endTransition();
}
if ($previousView.length) {
$previousView.transition({
opacity: 0,
scale: 0.3,
duration: 500,
easing: 'in',
complete: function(){
$previousView.css('display' ,'none');
startTransition();
}
});
//$('.news').css('display','none');
//$previousView.fadeOut(fadeOutDuration, startTransition);
} else {
startTransition();
}
}
}).promise();
};
return entrance;
});
sorry for my bad English.
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加