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