Javascript 在CSS转换期间是否可以保持对象适合？

我正在处理一个组件，该组件将图像从开始位置+比例转换为结束位置+比例（即填充屏幕）。这是通过

translate

和

scale

上的CSS变换动画完成的

挑战在于，要从中转换的一些图像可能会被组件用户使用

对象拟合

属性进行更改。但是，

CSS translate

在translate期间似乎没有维护

对象适合性

属性

代码笔示例如下：

我知道我可以在技术上设置

宽度

和

高度

的动画，但出于性能原因，我希望与浏览器可以设置的属性保持一致，也就是说，不会影响布局，这只会给我们留下位置、旋转、缩放和不透明度

参考资料：

---

我是否可以逐渐将过渡动画设置为“uncrop”图像，而不是拉伸它们

对象拟合

在转换之前应用于元素

无论对象上所有CSS的结果是什么，

transform

接受它并应用转换。事实上，DOM中的元素保持不变。这就是为什么

transform

不会触发重新绘制（并且被认为是性能）。仅变换其渲染（合成层）。由于变换，其渲染在X轴上拉伸4次。但这不会使元素的宽度增加4倍，因此对象拟合无法按预期应用

---

你能慢慢地解开绳子吗？是，但不能使用

变换
。为了尽可能便宜地完成此操作（而不会触发后续流程的重新绘制），您需要：

与图像一样高的父占位符（带
位置：relative
），用于在文档流中保持空间自由
要设置动画的元素，具有
位置：绝对
。因此，即使设置了
宽度
的动画，也不会触发
布局
，因为元素位于文档流之外


.transform占位符{
高度：100px；
位置：相对位置；
}
.transform占位符.object fit{
宽度：100px；
高度：100px；
动画：对象拟合2.1s无限；
动画计时功能：立方贝塞尔（.4,0,2,1）；
}
@关键帧对象拟合{
0% {
宽度：100px；
}
50% {
宽度：400px；
}
100% {
宽度：100px；
}
}

上面的动画不会在动画分区之外的任何DOM元素上触发重新绘制。
对象拟合
在转换之前应用于元素

无论对象上所有CSS的结果是什么，
transform
接受它并应用转换。事实上，DOM中的元素保持不变。这就是为什么
transform
不会触发重新绘制（并且被认为是性能）。仅变换其渲染（合成层）。由于变换，其渲染在X轴上拉伸4次。但这不会使元素的宽度增加4倍，因此对象拟合无法按预期应用


你能慢慢地解开绳子吗？是，但不能使用
变换
。为了尽可能便宜地完成此操作（而不会触发后续流程的重新绘制），您需要：

与图像一样高的父占位符（带
位置：relative
），用于在文档流中保持空间自由
要设置动画的元素，具有
位置：绝对
。因此，即使设置了
宽度
的动画，也不会触发
布局
，因为元素位于文档流之外


.transform占位符{
高度：100px；
位置：相对位置；
}
.transform占位符.object fit{
宽度：100px；
高度：100px；
动画：对象拟合2.1s无限；
动画计时功能：立方贝塞尔（.4,0,2,1）；
}
@关键帧对象拟合{
0% {
宽度：100px；
}
50% {
宽度：400px；
}
100% {
宽度：100px；
}
}

上面的动画不会在动画分区之外的任何DOM元素上触发重新绘制。
您想要影响布局，所以不，不是使用
对象拟合
。您想要影响布局，所以不，不是使用
对象拟合
。