Javascript 如何在第一次设置动画/转换时切换显示：无/显示：块

类似的问题在这里以各种形式的复杂性被提出。一些使用jQuery的用户：

还有一些非常具体的方案，它们超越了试图实现的目标的范围和简单性：

但以这段非常精简的代码为例：

var button=document.getElementsByTagName（'button'）[0]，
div=document.getElementsByTagName（'div'）[0]；
按钮。addEventListener（'单击'，切换可见性）；
函数toggleVisibility（）{
如果（
div.classList.contains（'show'）
){
div.classList.remove（'show'）；
添加（'hide'）；
}
否则{
添加（'show'）；
div.classList.remove（'hide'）；
}
}

div{
高度：100px；
宽度：100px；
背景：#000；
过渡：1s；
}
.隐藏{
不透明度：0；
}
.表演{
不透明度：1；
}

正方形



单击以切换隐藏/显示

在转换上添加事件侦听器以更改显示属性；它无法转换，因为它只是将元素从模式更改为其他模式。因此，如果要更改显示，请在转换开始之前/之后执行

var button = document.getElementsByTagName( 'button' )[ 0 ],
    div = document.getElementsByTagName( 'div' )[ 0 ];

button.addEventListener('click', toggleVisibility)
div.addEventListener('transitionend', function() {
    if (this.classList.contains('hide')) {
        this.style.display = 'none'
    }
})

function toggleVisibility(){
    if (div.classList.contains( 'show' )) {
        div.classList.remove( 'show' );
        div.classList.add( 'hide' );
    }
    else {
        div.style.display = 'block'
        div.classList.add( 'show' );
        div.classList.remove( 'hide' );
    }
}




div {
  height: 100px;
  width: 100px;
  background: #000;
  transition: 1s;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

---

EDIT：我刚刚意识到，这在从hide=>show的转换中效果不太好。解决可见性问题的另一个可能的解决方案是，不仅要更改可见性属性，而且在它被隐藏时，只需添加

z-index:-10

，或者类似的内容（可能不是那么可笑的数字）。就你的分层而言，它不会妨碍你，而且不会影响过渡。（如果您需要从布局中删除元素，这可能不起作用，但尚未阐明。）

设置

可见性

，而不是

显示

，如果要设置同步，可以将转换属性设置为

所有

（

转换：所有1s

）

代码

div {
  height: 100px;
  width: 100px;
  background: #000;
  transition: visibility 0s, opacity 0.5s linear;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

.show {
  visibility: visible;
  opacity: 1;
}

---

将

指针事件

添加到

.hide

类应该可以做到这一点

.hide {
  pointer-events: none;
  opacity: 0;
}

---

这就是你要找的吗？淡入淡出，然后消失，显示：无

var button=document.getElementsByTagName（'button'）[0]，
div=document.getElementsByTagName（'div'）[0]；
按钮。addEventListener（'单击'，切换可见性）；
函数toggleVisibility（）{
如果（
div.classList.contains（'show'）
){
div.classList.remove（'show'）；
setTimeout（函数（）{
添加（'hide'）；
}, 500);
}
否则{
div.classList.remove（'hide'）；
setTimeout（函数（）{
添加（'show'）；
}，0）；//是的，它需要1个刻度的延迟才能工作。
}
}

div{
不透明度：0；
高度：100px；
宽度：100px；
背景：#000；
过渡：不透明度1s；
}
.隐藏{
显示：无；
}
.表演{
不透明度：1；
}

单击以切换隐藏/显示

如果

display:none

使显示中断，则始终可以通过使用

可见性：隐藏

/

可见性：可见

来规避此问题。它的作用是隐藏元素，而不实际删除其在DOM中的结构：）@obsidiange请参见Edit.OP不想使用

可见性：hidden

耶。我想使用

setTimeout

。我想这确实是最好的选择。@solacyon您可以添加一个html属性，以便在CSS中定义时间，如果您需要灵活性，JS可以选择时间作为延迟。@solacyon My bad。编辑了我的答案。你能再检查一下吗<代码>显示：无不再需要，因为我们只需要将其隐藏，并且

指针事件：无

将禁用在该元素上发生的任何单击。我认为sol意味着当不透明度为0时，该元素仍然会占用空间，与可见性相同。之前曾建议过。@solacyon的解释是，隐藏元素不应妨碍对其他元素的单击。不确定他是不是在说太空，这真是天才。这正是我想要的，但我要在此指出的是，元素的高度也必须改变才能获得完全的效果。不知道有一个

指针事件

属性！谢谢@publimeObject还提到将z索引更改为负数。这个解决方案似乎最简单。