IE 10 + 11: CSS-переходы с calc() не работают

Я анимирую контейнер при наведении мыши справа налево с помощью CSS-переходов. Это отлично работает во всех браузерах, кроме Internet Explorer. Причина в том, что я использую (и должен использовать) calc() в моем свойстве CSS left.

Я создал демо здесь:Live Demo

CSS выглядит так:

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)
}

я добавляю класс .перевести-меньше на mouseover с jQuery:

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

Теперь я бы как иметь плавный переход в Internet Explorer. Для этого я бы даже бросил calc () для этих конкретных браузеров и добавил правило, подобное left: 85%;. Но IE 10 и 11 имеют прекращена поддержка условных комментариев и, похоже, нет никакого способа специально нацелить эти браузеры. IE 10 может быть нацелен на - ms-высокая контрастность-hack, но IE 11 не может. Я не хочу использовать JavaScript для определения браузера, потому что это, кажется, даже hackier чем используя хаки для CSS.

помочь? Заранее спасибо!

44
css-transitions internet-explorer

1 ответов

может быть transform: translateX() может обеспечить обходной путь. В зависимости от обстоятельств, использование преобразований и свойства right может быть лучше:

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

вот модифицированная версия вашего скрипта:http://jsfiddle.net/xV84Z/1/.

кроме того, пока вы не можете использовать calc() внутри translateX() в IE (из-за ошибка), вы можете применить несколько translateX()s в преобразовании:

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

(однако 90% в этом случае означает 90% цель, а не родителей.)

101