看完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
之前,我应该使用该属性创建另一个类并将其添加到元素还是有其他选择?
最佳答案
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>
关于CSS will-change 属性切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41985687/