使用translateZ(0)提升性能的原理是什么？

最新推荐文章于 2024-06-03 13:31:43 发布

weixin_33881140

最新推荐文章于 2024-06-03 13:31:43 发布

阅读量1.3k

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/daladida/blog/1491225

版权

2019独角兽企业重金招聘Python工程师标准>>>

要做一个div从底部往上弹出的动画效果，代码如下

.couponList_div{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	-webkit-transition: height 0.4s ease;
	-moz-transition: height 0.4s ease;
	-o-transition: height 0.4s ease;
	transform:translateZ(0rem);
	background-color: #fff;
	z-index: 10;
}
.couponList_div.on{
	height: 21.7rem;
	transform:translateZ(21.7rem);
}

使用translateY或者使用jQuery的slideDown()或者animate()都在X5内核的微信里卡顿，唯独使用translateZ良好原因参考https://segmentfault.com/q/1010000007962353

转载于:https://my.oschina.net/daladida/blog/1491225