1.will-change
will-change提高页面动画等渲染性能,也告诉浏览器什么属性、什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率。
属性值:
auto: 实行标准浏览器优化。
scroll-position: 指明元素的滚动位置将会出现动画变化,浏览器应该为滚动视窗内容的不可见部分事先做好准备。
contents: 指明元素的内容将会发生变化,浏览器不要缓存它们的内容。
: 表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写,则代表所有与之对应的简写或者全写的属性
例如:
.left {
width: 300px;
height: 100%;
background: skyblue;
transition: width 2s;
will-change: transform;
}
.left:hover{
width: 400px;
transform: translate3d(100px, 0px, 10px);
}
上面写法不推荐是可以这样直接写在默认状态中,因为will-change会一直挂着,会增加浏览器的负担。所以要使用hover来进行控制will-change有效使用
以下使用hover,会使will-change属性移除掉,也会will-change不一致挂着页面上,
.left {
width: 300px;
height: 100%;
background: skyblue;
transition: width 2s;
}
.left:hover{
width: 400px;
transform: translate3d(100px, 0px, 10px);
will-change: transform;
}
2. user-select
user-select 控制用户能否选中文本。除了文本框内,它对被载入为 chrome 的内容没有影响
语法:
user-select:none |text| all | element
取值:
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element:可以选择文本,但选择范围受元素边界的约束
例子:
.left {
width: 300px;
height: 100%;
background: skyblue;
transition: width 2s;
user-select: none;
text-align: center;
}
以下为none时,无法进行选中文本
.left {
width: 300px;
height: 100%;
background: skyblue;
transition: width 2s;
user-select: all;
text-align: center;
}
以下为all时,鼠标点击区域就会选中文本
text是选中文本,不过除了css也可以在div中加上onselectstart事件也是可以控制文本禁止选中。
<div class="box" id="box">
<div class="left" id="left" onselectstart="return false;">测试文本是否选选中</div>
<div class="right" id="right"></div>
</div>