浅谈css3属性will-change和user-select

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>