使用纯JS完成转换后，设置display none

Question

只有在CSS转换完成后，我才能将display设置为none(反之亦然(？

这是我当前的代码，但它不能很好地工作——转换不可见，因为我正在直接添加/删除display:none;。

<script type="text/javascript">
var mobile_menu       = document.querySelector('#mobile-menu');
var mobile_menu_open  = document.querySelector('#open-mobile-menu');
var mobile_menu_close = document.querySelector('#close-mobile-menu');
mobile_menu_open.addEventListener('click', function (event) {
mobile_menu.classList.remove('duration-100', 'ease-in', 'opacity-0', 'scale-95');
mobile_menu.classList.add('duration-200', 'ease-out', 'opacity-100', 'scale-100');
mobile_menu.removeAttribute('style'); 
});
mobile_menu_close.addEventListener('click', function (event) {
mobile_menu.classList.remove('duration-200', 'ease-out', 'opacity-100', 'scale-100');
mobile_menu.classList.add('duration-100', 'ease-in', 'opacity-0', 'scale-95');
mobile_menu.style.display = "none";
});
</script>

我只能想到setTimeout();，但在大多数情况下，它不被认为是一个合适的解决方案，而是一个肮脏的黑客。我还有其他选择吗？

Answer 1

您可以使用transitionend事件侦听器。

mobileMenu.addEventListener('transitionend', setDisplayNone);

动画完成后，它将执行setDisplayNone()。如果你只想运行一次，你可以在setDisplayNone函数的末尾添加这个：

mobileMenu.removeEventListener('transitionend', setDisplayNone);

示例：

var div = document.querySelector('div')
function setDisplayNone() {
div.style.display = 'none'
}
document.querySelector('button').onclick = function() {
div.addEventListener('transitionend', setDisplayNone);
div.classList.add('transition')
}

.transition {
transition-duration: 3s;
opacity: 0;
}

<button>Click me!</button>
<br>
<div id='someDiv'>
Click the button!
</div>
This text will shift upwards once the div has display:none