internet explorer - propiedad - IE 10+11: las transiciones CSS con calc() no funcionan

transition property

Question

Estoy animando un contenedor al pasar el ratón de derecha a izquierda con transiciones de CSS. Esto funciona bien en todos los navegadores excepto en Internet Explorer. La razón es que estoy usando (y necesito usar) calc () en mi propiedad izquierda CSS.

Creé una demostración en vivo aquí: demostración en vivo

El CSS se ve así:

div {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 90%;
    -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
div.translate-less {
    left: calc(90% - 4rem)
}

Estoy agregando la clase .translate-less en mouseover con jQuery:

$(document)
.on( ''mouseenter'', ''div'', function(){
    $(this).addClass(''translate-less'')
})
.on( ''mouseleave'', ''div'', function(){
    $(''div'').removeClass(''translate-less'');
})

Ahora me gustaría tener una transición sin problemas en Internet Explorer. Para eso, incluso descartaría el calc () para estos navegadores específicos y agregaría una regla como la left: 85%; . Pero IE 10 y 11 han dejado de admitir comentarios condicionales y parece que no hay forma de dirigirse específicamente a estos navegadores. IE 10 se puede orientar con el -ms-high-contrast-hack , pero IE 11 no. No quiero usar JavaScript para detectar el navegador porque esto parece aún más complicado que usar hacks de CSS.

¿Alguna ayuda? ¡Gracias por adelantado!

Answer 1

Tal vez transform: translateX() puede proporcionar una solución alternativa. Dependiendo de las circunstancias, usar transformadas y la propiedad correcta podría ser mejor:

right: 10%;
transform: translateX(-4rem); 

Aquí hay una versión modificada de su script: http://jsfiddle.net/xV84Z/1/ .

Alternativamente, aunque no puede usar calc() dentro de un translateX() en IE (debido a un error ), puede aplicar múltiples translateX() s en una transformación:

/* This */
transform: translateX(90%) translateX(-4rem);
/* is equivalent to this */
transform: translateX(calc(90% - 4rem));

(Sin embargo, el 90% en este caso significa el 90% del objetivo, no el padre).