知识卡片

强制重绘触发CSS过渡的两步class技巧

专业/工作 · 178

内容

直接给元素同时加上两个样式类不会触发CSS transition,因为浏览器会把两次class变更合并成一次渲染、看不到中间状态。Bootstrap轮播组件的解决办法是分两步:先加第一个类并读取一次element.offsetWidth强制浏览器立即重绘,再加第二个决定动画目标值的类,这样浏览器才能感知到”起点”和”终点”两个真实状态并播放过渡动画。

参考来源

《深入理解Bootstrap》第5章《JavaScript插件》