jquery animate css在移動設備（android）上不夠流暢？

Question

我用jquery創建了一個簡單的動畫CSS。

在瀏覽器中這是很好，很流暢，但當我看着它在移動設備上，它似乎很糟糕。它不像桌面瀏覽器那樣流暢。

這是什麼，我有一個工作的小提琴：

https://jsfiddle.net/urchksr3/1/

$('.child-element').animate({"width":"80%", "left":"20px"}, 600); 

，我有是有實現這一目標只用CSS的任何問題？

Answer 1

，可以嘗試通過CSS加入一些transition動畫如下，並添加/刪除類說small這裏定義小width和left性能：

.child-element { 
    width: 90%; 
    overflow: auto; 
    margin: auto; 
    position: absolute; 
    top: 0px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

.small { 
    left: 20px; 
    width: 80%; 
} 

個

JS

$('#makesmall').on('click', function() { 
    $('.child-element').addClass('small'); 
}); 


$('#makebig').on('click', function() { 
    $('.child-element').removeClass('small'); 
}); 

UPDATED FIDDLE

Answer 2

無論如何，動畫寬度和定位都不是高性能的。你可以嘗試通過jquery添加一個類，並使用translate 3d來開始一個css動畫。或添加

-webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    /* Other transform properties here */ 

到類

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Answer 3

使用CSS轉換。

.child-element{ transition: width 600ms, left 600ms } 
.child-element.small{width: 80%; left: 20px;} 
.child-element.big{width: 90%; left: 0;} 

$('#makebig').on('click', function(){ 
    $('.child-element').removeClass("small"); 
    $('.child-element').addClass("big"); 
}); 
$('#makesmall').on('click', function(){ 
    $('.child-element').removeClass("big"); 
    $('.child-element').addClass("small");}); 
} 

Answer 4

使用addClass和removeClass當點擊

.animate { 
    width: 100% !important; 
    left: 20px !important; 
    transition: all 0.5s; 
} 

JS

$('#makesmall').on('click', function(){ 
    $('.child-element').addClass('animate'); 
}); 


$('#makebig').on('click', function(){ 
    $('.child-element').removeClass('animate'); 
});