CSS将更改属性切换

Question

在阅读了CSS技巧的帖子之后，我在文章的末尾注意到了一条建议。

建议在元素或属性更改之前切换will-change，然后在进程完成后不久再关闭它

举个例子，我的css如下所示

.item {
  opacity: 0;
  transition: opacity .5s ease-in-out;
  will-change: opacity;
}

.item.visible {
  opacity: 1;
}

我的问题是，在动画之前和之后，我应该如何切换will-change属性？我应该用属性创建另一个类，并在添加.visible之前将其添加到元素中，还是有其他选择？

Answer 1

建议在元素或属性更改之前切换will-更改，然后在进程完成后不久再将其关闭。

在您的例子中，我会添加一个类，它将opacity: 0;内容表示为被隐藏(.hidden)的.item状态，并将will-change分配给该类，而不是将其分配给.item。然后，无论将状态更改为.visible，都可以在opacity转换完成后删除.hidden，这将删除will-change定义并将其返回到auto的默认状态。

​

var button = document.getElementById('button').addEventListener('click', function() {
  var item = document.getElementById('reveal');
  item.classList.add('visible');
  var allDone = setTimeout(function() {
    item.classList.remove('hidden');
  },1000)
});

.item.hidden {
  opacity: 0;
  transition: opacity .5s ease-in-out;
  will-change: opacity;
}

.item.visible {
  opacity: 1;
}

<button id="button">click</button>
<div class="item hidden" id="reveal">ta-da!</div>

​