html5网站建设公司,关于建设网站的图片素材,php网站开发培训班,柒零叁网站建设湖南长沙提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 目的一、举个栗子二、性能分析1.从图层分析2.性能分析 总结 目的
为了探究使用动画时#xff0c;『transform』和『width、height、margin等』的差异 一、举个栗子… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 目的一、举个栗子二、性能分析1.从图层分析2.性能分析 总结 目的
为了探究使用动画时『transform』和『width、height、margin等』的差异 一、举个栗子
示例代码使用width、height 使用transform的scale缩放
templatediv classcontainerdiv classcontentdiv :class[box, { isCurrent: item current }] v-foritem in 10{{ item }}/div/divdiv classcontentdiv :class[box, { isBCurrent: item bCurrent }] v-foritem in 10{{ item }}/div/divdiv classbtn-boxbutton clicktoScroll宽高启动/buttonbutton clicktoBScroll stylemargin:0 10px;缩放启动/button/div/div
/template
script setup langts
import { ref } from vue
let current ref(0)
const toScroll () {let timer setIntervalÏ(() {if (current.value 11) {current.value} else {clearInterval(timer)current.value 0}}, 500)
}let bCurrent ref(0)
const toBScroll () {let timer setInterval(() {if (bCurrent.value 11) {bCurrent.value} else {clearInterval(timer)bCurrent.value 0}}, 500)
}/script
style langscss
.container {.content {display: flex;justify-content: center;align-items: center;height: 100px;.box {display: flex;justify-content: center;align-items: center;width: 50px;height: 50px;margin: 50px;}.isCurrent {width: 100px;height: 100px;transition: all 10s ease;background-color: red;}.isBCurrent {transform: scale(2);transition: all 10s ease;background-color: blue;}}.btn-box {display: flex;justify-content: flex-end;}
}
/style二、性能分析
1.从图层分析
下面是从图层的绘制次数可清楚看到区别 从图层的角度来看使用CSS的transition属性来改变元素的宽高与直接改变元素的宽高不使用transition有以下区别
图层动画与重绘 ○ 使用transition的动画效果可以触发硬件加速在支持的浏览器上将动画过程中的元素提升到一个单独的复合图层compositing layer。这意味着浏览器可以使用GPU加速动画的渲染从而提高性能。 ○ 直接改变宽高尤其是在没有使用transition的情况下可能会导致频繁的重绘repaint和重排reflow。每次元素的尺寸改变浏览器都必须重新计算元素的几何位置和其余页面布局然后重新绘制影响的部分这可能导致性能问题。渲染管线 ○ 使用transition时浏览器可以优化渲染管线预先知道会有一个持续的变化因此可以更好地调度资源和时间。 ○ 没有transition的直接宽高调整则是立即生效的浏览器需要即时处理这些变更没有过渡效果可能导致用户体验不够平滑。图层创建与管理 ○ transition动画在进行时如果触发了图层的创建那么在动画结束后浏览器可能会将该图层合并回主图层以节省资源这个过程是自动且对用户透明的。 ○ 直接改变宽高不涉及图层的额外管理也就没有额外的图层优化机会。渲染后的页面复杂性 ○ 使用transition可能会临时增加页面的复杂性因为它添加了动态变化的图层。但这通常是短暂的并且在动画结束后页面可能会恢复到较少的图层。 ○ 直接改变宽高对页面的图层复杂性影响较小因为它不会引入额外的动态变化。
2.性能分析
性能分析总耗时 性能比较
总结
优先使用transform而不是使用widthheight 推荐文章 https://mp.weixin.qq.com/s?__bizMzk0NTI2NDgxNQmid2247484939idx1sn229467c549cec5e3980671f488a4d89echksmc31947cbf46ecedd13f930b44e9bc2a25ce706a8d30fce56c54584598015640338a6e075b8ff#rd
