科爾多瓦良好的性能轉換

我正在製作科爾多瓦應用程序。和幾乎所有的應用程序一樣，您可以在不同的頁面之間切換我製作了一個jQuery動畫，其中新頁面從左到右依次爲：科爾多瓦良好的性能轉換

$('#seite_2').css('left', '-100%');  
$('#seite_2').animate({left: '0%'}, 150);

我擁有Galaxy S6，動畫非常滯後。那麼我應該使用哪種動畫來製作一個好的（沒有滯後）動畫。我不必從左到右來。它也可以是不同類型的動畫，看起來比直接頁面交換更好。其他CSS動畫或插件將非常酷;）

來源

2016-01-27 T. Jansen

最好的辦法是不使用多個HTML文件，只是做一個單頁的應用程序。每個文件加載都會減慢你的應用程序，開發一個多頁面應用程序要複雜得多。 docs：http://cordova.apache.org/docs/en/latest/guide/next/index.html – Joerg

是的，它全部在一個HTML文件中，但有不同的頁面div。問題是，他們的動畫是非常緩慢，wehne他們「飛」進來。 –

你可以在https://jsfiddle.net/或其他網站上分享你的完整代碼嗎？我認爲它可能受其他組件影響，而不是JQuery庫。 –

對於移動應用程序來說可能是過量的，但總的來說velocity.js可以提供高性能的動畫。在他們的網站上，你還可以瞭解爲什麼jQuery和CSS動畫較慢：

祕密武器

的JavaScript和jQuery被錯誤混爲一談。 Velocity使用的動畫，速度很快;它的jQuery速度很慢。雖然Velocity與jQuery一起工作，但它使用自己的動畫堆棧，它通過兩個基本原則提供其性能： 1）同步DOM→補間堆棧以最小化佈局抖動，以及2）緩存值以最大限度地減少DOM查詢。

更新：如果你喜歡CSS3動畫，也有一些規律可循達到60FPS性能：https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

來源

2016-12-20 02:08:12 JepZ

硬件加速CSS通常可以改善這種類型的轉換。有了這個CSS車道：

-webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0);

在現代桌面和移動瀏覽器中觸發GPU加速。這似乎是觸發GPU加速（包括所有供應商前綴）

更多信息鏈接的最有效的方法：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css或者只是谷歌「硬件加速CSS」

來源

2016-01-28 10:30:58 Del

爲什麼我必須使用這個全部-webkit-，-moz-，-ms-，...它也適用於只是翻譯。這僅適用於較舊的瀏覽器嗎？ –

是的，與變換或-webkit轉換應該工作，其也加入，以防萬一您想要遷移到網絡並支持主流瀏覽器 – Del

所以我不喜歡使用它時，我正在使用moidern瀏覽器？ –

是否使用AngularJS？在嘗試AngularJS動畫之前，我嘗試了很長時間的頁面轉換的Jquery動畫。他們流暢而快捷，您可以個性化您自己的互動。

您只需要創建一個CSS樣式並將其包含到您的單頁應用程序主Div中。看：

HTML

<script src="angular/angular-animate.js"></script> 
.. 
<div id="mainMainDiv" class="fadeExample" ng-view=""></div>

CSS

.fadeExample{ 
    height: 100%; 
    opacity: 1; 
} 
.fadeExample.ng-enter, 
.fadeExample.ng-leave { 
    -webkit-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.fadeExample.ng-enter { 
    opacity: 0; 
} 
.fadeExample.ng-enter-active { 
    opacity: 1; 
} 
.fadeExample-leave { 
    opacity: 1; 
} 
.fadeExample.ng-leave-active { 
    opacity: 0; 
}

來源：

About the ngAnimate, ngLeave and ngEnter

Other Example

希望它有幫助！最好的祝福！

來源

2016-01-30 03:38:27 Cordovaing

科爾多瓦良好的性能轉換

回答

相關問題