CSS will-change 属性切换

Question

看完post在 CSS 技巧上，我注意到帖子末尾的一条建议

it’s recommended to toggle on will-change just before an element or property changes and then toggle it off again shortly after the process is finished

举个例子，我的 CSS 是这样的

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

.item.visible {
  opacity: 1;
}

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

Answer 1

it’s recommended to toggle on will-change just before an element or property changes and then toggle it off again shortly after the process is finished.

在你的情况下，我会添加一个带有 opacity: 0; 的类，表示 .item 的状态被隐藏(.hidden)，并将 will-change 分配给该类，而不是将其分配给 .item。然后无论是什么将状态更改为 .visible 都可以在 opacity 转换完成后删除 .hidden，这将删除 will -更改定义并将其返回到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>