Javascript 宽度为+；高度+；使改变

我需要将带有动画的图像从栅格视图扩展到“lightbox”视图

HTML

一切都正常，但动画不稳定。当我去掉宽度和高度时，它会平滑很多。因此，我尝试使用变换（即缩放（3，3）），它也有平滑的动画，但图像模糊

---

我不确定这是一个浏览器限制还是我采取了错误的方法

你试过隐藏背面可见性吗？图像可能很大？换个角度想想，缩小一个更大的图像，就像它是你的缩略图一样，比如说

scale（0.3）

，然后执行动画回到

scale（1）

。将图像缩放到3倍会使图像模糊。您可以尝试将默认值设置为

scale（0.33）

，并将其设置为

scale（1）

，以使其达到最大缩放。@sabithpocker我有

背面可见性：隐藏设置在动画元素上，图像大约为100k，620X1130在浏览器中使用宽度/高度调整图像大小通常比较昂贵。如果对许多图像或大图像执行，则可能会出现起伏。
<ul>
    <li><img src="cats.jpg"></li>
    <li><img src="cats.jpg"></li>
    <li><img src="cats.jpg"></li>
    .
    .
    .
</ul>

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';
}