CSS Transition Choppy для ширины + высота + преобразование

80
6

Мне нужно развернуть изображение с анимацией из вида сетки в вид "лайтбоксов".

HTML

<ul>
<li><img src="cats.jpg"></li>
<li><img src="cats.jpg"></li>
<li><img src="cats.jpg"></li>
.
.
.
</ul>

JS

function clickHandler(event) {
var elem = event.target;
elem.classList.add('animate');
elem.style.transform = 'translate3d(x, y, z)'; // x, y, z are calculated px
elem.style.width = w + 'px'; // w and h are also calculated
elem.style.height = h + 'px';
}

Все работает, но анимация изменчивая. Когда я удаляю ширину и высоту, она становится более гладкой. Поэтому я попытался использовать преобразование (т.е. Масштаб (3, 3)), он также имеет плавную анимацию, но изображение размыто.

Я не уверен, что это ограничение браузера, или если я ошибаюсь.

спросил(а) 2017-01-10T07:21:00+03:00 3 года, 8 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема