2015-05-08 192 views
6

每當我似乎應用一些代碼讓我們說例如使用最新的iOS Safari瀏覽器移動div時,它實際上並不在兩個規則集之間轉換。我嘗試更改百分比值以外的值,但直到今天,我仍然無法使用transition: transform;來應用任何translate屬性。iOS Safari轉換轉換不起作用

我使用正確的前綴和檢查的支持,應該沒問題。

http://caniuse.com/#search=transition

http://caniuse.com/#search=translate

JSFiddle

$('button').on('click', function() { 
 
    $('.mydiv').toggleClass('added-class'); 
 
});
.mydiv { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: red; 
 

 
    -moz-transform: translateY(0); 
 
    -ms-transform: translateY(0); 
 
    -o-transform: translateY(0); 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
    -moz-transition: transform 0.6s ease-out; 
 
    -o-transition: transform 0.6s ease-out; 
 
    -webkit-transition: transform 0.6s ease-out; 
 
    transition: transform 0.6s ease-out; 
 
} 
 

 
.added-class { 
 
    -moz-transform: translateY(100%); 
 
    -ms-transform: translateY(100%); 
 
    -o-transform: translateY(100%); 
 
    -webkit-transform: translateY(100%); 
 
    transform: translateY(100%); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="mydiv"></div> 
 
<button type="button">Toggle class</button>

回答

21

transitiontransform老版本的iOS Safari瀏覽器只支持供應商前綴屬性和值的,所以你應該使用-webkit-transition: -webkit-transform代替-webkit-transition: transform

JSFiddle

$('button').on('click', function() { 
 
    $('.mydiv').toggleClass('added-class'); 
 
});
.mydiv { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: red; 
 

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

 
    -webkit-transition: -webkit-transform 0.6s ease-out; 
 
    -moz-transition: transform 0.6s ease-out; 
 
    -o-transition: transform 0.6s ease-out; 
 
    transition: transform 0.6s ease-out; 
 
} 
 

 
.added-class { 
 
    -webkit-transform: translateY(100%); 
 
    -moz-transform: translateY(100%); 
 
    -ms-transform: translateY(100%); 
 
    -o-transform: translateY(100%); 
 
    transform: translateY(100%); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="mydiv"></div> 
 
<button type="button">Toggle class</button>

+1

似乎這樣的伎倆,謝謝謝爾蓋! 現在轉換完美了(在iPhone 6 iOS8上測試)。 –