will-change

will-change 属性只能在特定的时间内发生作用。我们不能够在一个已经的元素上使用 will-change: 。 我们要注意以下几点：

例如下面使用 will-change 属性的方法是没有任何效果的：

.will-change:active  {
  will-change: transform;
  transition: transform 0.3s;
  transform: scale(1.5);
}  

上面的代码中，是在一个变化已经发生的时候，才去通知浏览器。 will-change 属性没有起到相应的作用。如果我们希望浏览器预先知道要发生的变化，我们要在正确的时间通知它。

一个元素要达到 active 状态，它必须先经过 hover 状态，所以我们的代码应该这样写：

.will-change {
  transition: transform 0.3s;
}
  
.will-change:hover {
  will-change: transform;
}
  
.will-change:active {
  transform: scale(1.5);
}

浏览器会尽可能的对元素将要发生的变化进行优化。浏览器为了释放内存会尽可能的移除一些优化操作。在一个元素上直接使用 will-change 属性，会强制浏览器去对它进行优化，这有可能会照成内存的浪费。因此，我们要在正确的时间里对元素添加和移除 will-change属性 。正如上面的例子一样， will-change 只会在鼠标滑过元素的时候才被添加。如果我们想要发生在鼠标 hover 时该怎么呢？你可能会这样写代码：

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
  
.will-change:hover {
  transform: scale(1.5);
}

上面的代码会增加内存的使用，因为我们强制浏览器认为元素会在所有的时间里都会发生改变。我们可以在元素的父元素上制作鼠标悬停事件来解决这个问题：

.will-change-parent:hover .will-change {
  will-change: transform;
}
  
.will-change {
  transition: transform 0.3s;
}
  
.will-change:hover {
  transform: scale(1.5);
}

上面的代码会在鼠标进入父元素时添加优化操作，并在鼠标移出时移出它。但是这意味着，每次鼠标进入父容器的时候，浏览器都会期待在元素上发生一次改变。

当你使用完 will-change 属性之后一定要记得移除它。正如上面所说的，浏览器的优化是非常昂贵的，如果使用的不好，会造成相反的效果。我们可以使用javascript来处理它。

例如有一个class为 .element 的元素，当我们点击它的时候，它会发生。CSS代码类似下面的样子：

.element {
  transition: transform 0.5s;
}
  
.element.clicked {
  transform: scale(1.5);
}    

如果我们需要通知浏览器来响应优化元素点击后的效果，我们可以像下面这样做：

var el = document.querySelector('.element');
  
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);
  
function hintBrowser() {
  this.style.willChange = 'transform';
}
  
function removeHint() {
  this.style.willChange = 'auto';
}

上面的代码只是一个片段，你需要添加必要的javascript来在元素被点击的时候添加相应的 clicked class。但是我们从上面的代码中可以观察到浏览器是如何为将要发生的改变做准备工作的，还有在改变完成之后是如何释放内存的。当鼠标进入元素中的时候，元素被添加 will-change 属性。当元素被点击，被执行的时候，将会发出事件。在 animationEnd 的时候， will-change 属性被移除，内存被释放。

will-change: auto | <animateable-feature>#
// 其中#表示你可以使用多个animatable-features，各个值之间使用逗号来分隔。
<animateable-feature> = scroll-position | contents | <custom-ident>

参数：

will-change: contents;
will-change: scroll-position;
will-change: opacity;

/* 多个值 */
will-change: contents, transform;
will-change: scroll-position, opacity;