Question

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

How to toggle animate with css display:none。

一些非常具体的内容超出了试图实现的范围和简单性：

JavaScript - add transition between display:none and display:block

但是以这个非常简化的代码为例：

var button = document.getElementsByTagName( 'button' )[ 0 ],
    div = document.getElementsByTagName( 'div' )[ 0 ];

button.addEventListener( 'click', toggleVisibility );

function toggleVisibility(){
  if( 
    div.classList.contains( 'show' ) 
   ){
    div.classList.remove( 'show' );
    div.classList.add( 'hide' );
  }
  else {
    div.classList.add( 'show' );
    div.classList.remove( 'hide' );
  }
}

div {
  height: 100px;
  width: 100px;
  background: #000;
  transition: 1s;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

<p>A square</p>

<div class="show"></div>

<br>

<button>click to toggle hide/show</button>

这成功切换了不透明度。但是，只要我将display: none添加到.hide类，效果就会突然崩溃：

var button = document.getElementsByTagName( 'button' )[ 0 ],
    div = document.getElementsByTagName( 'div' )[ 0 ];

button.addEventListener( 'click', toggleVisibility );

function toggleVisibility(){
  if( 
    div.classList.contains( 'show' ) 
   ){
    div.classList.remove( 'show' );
    div.classList.add( 'hide' );
  }
  else {
    div.classList.add( 'show' );
    div.classList.remove( 'hide' );
  }
}

div {
  height: 100px;
  width: 100px;
  background: #000;
  transition: 1s;
}

.hide {
  display: none; /* added "display:none" in this example */
  opacity: 0;
}

.show {
  opacity: 1;
}

<p>A square</p>

<div class="show"></div>

<br>

<button>click to toggle hide/show</button>

什么是简单，可重复使用的解决方案，我们可以在没有任何插件或库的情况下首先淡出，然后关闭display并首先打开display然后淡入？

修改：我使用display而不是visibility，因为在这个示例中，因为在大多数情况下我使用此效果我希望将元素完全删除，因为它通常位于顶部阻碍mouseover / click影响的其他因素。

Answer 1

这是你在找什么？淡出然后消失display:none。

＆＃13;

var button = document.getElementsByTagName( 'button' )[ 0 ],
    div = document.getElementsByTagName( 'div' )[ 0 ];

button.addEventListener( 'click', toggleVisibility );

function toggleVisibility(){
  if( 
    div.classList.contains( 'show' ) 
   ){
    div.classList.remove( 'show' );
     setTimeout(function(){
         div.classList.add( 'hide' );
     }, 500);
  }
  else {
    div.classList.remove( 'hide' );
     setTimeout(function(){
         div.classList.add( 'show' );
     }, 0); //Yeah it needs a 1 tick delay to work.
  }
}

＆＃13;

div {
  opacity: 0;
  height: 100px;
  width: 100px;
  background: #000;
  transition: opacity 1s ease;
}
.hide {
   display:none;
}

.show {
  opacity: 1;
}

＆＃13;

<div class="show"></div>

<button>click to toggle hide/show</button>

＆＃13;

Answer 2

在transitionend上添加一个事件监听器来更改显示属性;它无法转换，因为它只是将元素从模式更改为另一个。因此，如果您想要更改显示，请在转换开始之前/之后进行。

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;
}

编辑：这在从hide =＆gt;转换时效果不佳秀，我刚刚意识到。解决可见性问题的另一个可能的解决方案是，不仅要更改可见性属性，还要隐藏它，只需添加z-index: -10或类似的东西（可能不是那么荒谬的数字）。就层次而言，它就不会受到影响，也不会影响转换。（如果您需要从布局中删除元素，这可能效果不佳，但尚未澄清。）

Answer 3

设置visibilty而不是display，如果您想设置同步，可以将过渡属性设置为all（transition:all 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;
}

Answer 4

将pointer-events添加到.hide类应该可以解决问题。

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

如何切换显示：无/显示：阻止第一个动画/过渡

4 个答案: