Question

在阅读了关于CSS技巧的post后，我在帖子的最后发现了一条建议

建议在元素或之前切换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-change，然后在该过程完成后立即再次将其关闭。

在您的情况下，我会添加一个类，其中opacity: 0;代表.item的状态为隐藏（.hidden），并为此will-change分配.item而不是将其分配给.visible。然后，只要将状态更改为.hidden，就可以在opacity转换完成后删除will-change，这将删除auto定义并将其返回到默认状态{ {1}}

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>

CSS将改变属性切换

1 个答案: