使用纯 JS 完成转换后设置显示 none

Question

如何仅在 CSS 转换完成后将显示设置为 none（反之亦然）？

这是我当前的代码，但效果不佳 – 转换不可见，因为我 adding/removing 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

使用纯 JS 完成转换后设置显示 none

Set display none after transition has finished with pure JS

javascript

css

css-transitions