css - sierra - Transformación de transición IOS Safari no funciona

safari high sierra

Question

Cada vez que parezco aplicar algún código, digamos mover un div, por ejemplo, usando el último navegador iOS Safari, en realidad no transiciona entre las dos reglas establecidas. He intentado cambiar para usar otros valores que no sean porcentajes, pero aún hoy, nunca he podido hacer que funcione cuando uso transition: transform; para cualquier propiedad de translate aplicada.

Estoy usando los prefijos correctos y comprobé el soporte y debería estar funcionando sin problemas.

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

Las versiones anteriores de iOS Safari solo admiten valores y propiedades prefijados por el proveedor para la transition y la transform , por lo que debe usar -webkit-transition: -webkit-transform en -webkit-transition: transform lugar -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>