是否可以动画(使用转换)只有一种类型的CSS变换？
我有css：
- cell{
- transform: scale(2) translate(100px,200px);
- transition: All 0.25s;
- }
现在，我只想把尺度做成动画。
在这种情况下，我可以使用position：absolute和left / right属性，但是我还记得，translate()的性能要好得多。
我也想避免使用额外的html元素。
解决方法
是!您将它分成两个选择器，其中一个转换：无，然后触发CSS回流以应用更改(否则将被视为一个更改并将转换)。
- var el = document.getElementById('el');
- el.addEventListener('click',function() {
- el.classList.add('enlarged');
- el.offsetHeight; /* CSS reflow */
- el.classList.add('moved');
- });
- #el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
- #el.enlarged { transform: scale(2); transition: none; }
- #el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
- <div id="el"></div>
