Transformacja przejścia IOS Safari nie działa

Question

Ilekroć wydaje mi się, że zastosowałem jakiś kod, powiedzmy, przenieś div na przykład używając najnowszej przeglądarki Safari na iOS, to tak naprawdę nie przechodzi on pomiędzy dwiema ustawionymi regułami. Próbowałem zmienić na inne niż wartości procentowe, ale nadal do dnia dzisiejszego, nigdy nie byłem w stanie go uruchomić, gdy używam transition: transform; dla każdej zastosowanej właściwości translate.

Używam poprawnych prefiksów i sprawdzonej pomocy technicznej i nie powinno to stanowić problemu.

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>

Answer 1

Stare wersje wsparcia iOS Safari właściwości i wartości jedynym dostawcą-prefiksem dla transition i transform, więc Należy używać -webkit-transition: -webkit-transform zamiast -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>