Trasformazione di transizione IOS Safari non funzionante

Question

Ogni volta che mi sembra di applicare del codice per dire di spostare un div, ad esempio utilizzando l'ultimo browser Safari iOS, in realtà non passa tra le due regole impostate. Ho provato a cambiare per usare valori diversi da quelli percentuali, ma fino ad oggi non sono mai riuscito a farlo funzionare quando utilizzo transition: transform; per qualsiasi proprietà translate applicata.

Sto usando i prefissi corretti e il supporto verificato e dovrebbe funzionare senza problemi.

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

Le vecchie versioni di supporto iOS Safari proprietà e valori solo vendor-prefissato per transition e transform, in modo da dovrebbe usare -webkit-transition: -webkit-transform invece -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>