css - CSS变更属性切换

在阅读了CSS技巧的post之后，我在帖子的最后注意到了一个建议


  建议在元素或元素之前打开will-change
  属性更改，然后在
  过程完成


举例来说，我的css就像这样

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

.item.visible {
  opacity: 1;
}

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

最佳答案

建议您在元素或属性更改之前先启用will-change，然后在流程完成后不久再次将其关闭。


在您的情况下，我将添加一个带有opacity: 0;东西的类，将.item的状态表示为隐藏状态（.hidden），然后将will-change分配给该类，而不是将其分配给.item。然后，只要.visible转换完成，将状态更改为.hidden的任何内容都可以删除opacity，这将删除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>