为什么 CSS 过渡不能与响应式图像滑块一起使用？

在 CSS 更改期间强制浏览器重排

在创建依赖于 CSS3 转换的非 jQuery 响应式图像滑块时，您可能会遇到以下问题： CSS 属性的更改不会触发动画。这是由于浏览器优化所致，它简化了属性更改并跳过动画。

要解决此问题，需要强制浏览器重排。重排是浏览器重新计算元素布局并重新定位它以响应样式更改的过程。

在您的代码片段中，您在制作初始 CSS 之前将过渡属性设置为“none 0s Linear”更改，然后将其切换回“全部 0.2 秒缓出”。然而，这种方法不会触发回流，因此不会发生动画。

解决方案在于在更改 CSS 后显式请求元素的 offsetHeight。此操作会启动重排并强制浏览器确认并应用修改后的样式。

实现此目的的代码是：

function reflow(elt){
    console.log(elt.offsetHeight);
}

其中“elt”是您创建的元素样式更改为。更改 CSS 后调用“reflow(elt)”将触发所需的动画。

以上是为什么 CSS 过渡不能与响应式图像滑块一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！