Правильно ли анимирует IE / Edge CSS для calc ()? - PullRequest
Новая
       21

Правильно ли анимирует IE / Edge CSS для calc ()?

0 голосов
/ 03 января 2019

Демонстрационная ссылка: https://codepen.io/jodriscoll/pen/wRpQOw

Я работаю над анимационным поведением, похожим на слепую сторону, когда пользователь наводит курсор на объект (якорь), он расширяет объект (якорь) по ширине и создает ощущение, что больше объектов содержит внутри (подумайте об обтравочной маске).

Первоначально объект видео / изображения стилизован таким образом, чтобы предотвратить его перемещение 1: 1 с помощью «обтравочной маски» (привязка, обертывающая видео / изображение). Это означает, что он уже смещен в положение, в котором он должен находиться, когда пользователь наводит курсор на якорь.

И изображение, и видео изначально стилизованы для заполнения всего якоря И промежутков между желобами; это помогает при анимации создать ощущение, что мы просто показываем больше фотографии, не изменяя ее размеры и не заставляя перемещаться по экрану (извините, это может сбить с толку ...): 

left: -24px;              // the width of each gutter gap
width: calc(100% + 48px); // fill the parent + fill the gutter gaps

Когда пользователь наводит курсор на привязку, дочерние элементы изменяют свои спецификации CSS на: 

left: 0;     // stay flush with the anchor object
width: 100%; // fill the parent, which now includes the gutter gap(s)

Кажется, что все работает правильно при просмотре анимации на Chrome / Safari / Firefox :

К сожалению, есть небольшой сбой в IE11 / Edge :

Вопросы и многообещающее полезное понимание для достижения ответа:

  • После просмотра проблемы с анимацией возникают ли в IE11 / Edge проблемы с анимацией мер CSS с использованием calc()?

  • Нужно ли создавать CSS-анимацию с ключевыми кадрами, чтобы исправить этот сбой в IE11 / Edge?

  • Я неправильно подхожу к этому и должен анимировать разные свойства?

1 Ответ

0 голосов
/ 03 января 2019

Вы можете сделать это легко с запасом и избежать использования calc.

Вот упрощенный пример: 

.container {
  border:1px solid;
  padding: 0 24px;
  height:100px;
}
.box {
  height:100%;
  background:red;
  transition:.5s all;
}
.box:hover {
  margin:0 -24px;
}
<div class="container">
  <div class="box"></div>
</div>

Или вот так: 

.container {
  border:1px solid;
  margin: 0 24px;
  height:100px;
}
.box {
  height:100%;
  background:red;
  transition:.5s all;
}
.box:hover {
  margin:0 -24px;
}
<div class="container">
  <div class="box"></div>
</div>
...