1

Я имею popup, который имеет следующие свойства

transition: 0.2s ease transform;
transform: scale(0.8) translate(-50%, -50%);

При открытом варианте он имеет свойства

transform: scale(1) translate(-50%, -50%);

Получается что popup выезжает как бы слева снизу чуть-чуть и выполняет scale, так как анимация стоит на весь transform. Вопрос, как сделать анимацию только для transform scale, и при этом не учитывать transform translate?

1
  • Насколько я знаю, так не получится сделать. Можно спозиционировать popup без translate(-50%,-50%). Выложите код, может чего и придумается.
    – zhurof
    27 июн 2018 в 13:17

1 ответ 1

6

Это можно сделать с CSS-переменными. Наведите на надпись Hover, так можно увидеть нужный эффект.

:root {
  --scale--ratio: 0;
}

.block {
  transform: scale(var(--scale--ratio)) translate(-50%, -50%);
  transform-origin: 0% 0%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 200px;
  background: #000;
  transition: transform .3s;
}

.hover:hover + .block {
  --scale--ratio: 1;
}
<div class="hover">
  Hover
</div>
<div class="block"></div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.