Question

所以...我有这个小网页，有两个div，一个按钮，两个css类和一个javascript函数。

这个想法是，当按下按钮时，该函数会更改div的css类并将其隐藏一个很好的过渡。当再次按下它时，它会产生光斑：

HTML：

<div id="div1" >
  <div id="div2" >
    Here be HTML stuffs.
  </div>
</div>

javascript：

hideNShow(){

  var w = $('#div2');
  var height = w.outerHeight();    

  if(document.getElementById("div1").className=="hidden")
      document.getElementById("div1").className="visible";
      document.getElementById("div1").style.height=height + "px";
  } else if (document.getElementById("div1").className=="visible") {
      document.getElementById("div1").className="hidden";
      document.getElementById("div1").style.height=0 + "px";
  }
}

CSS类：

.visible {
  visibility: visible;
  opacity: 1;
  transition: all 1s ease; 
}
.hidden {
  visibility: hidden;
  opacity: 0;
  height:0;
  overflow: hidden;
  transition: all 1s ease;
}

该按钮只是一个按钮，其功能在不同的div中引用。

我的问题，现在是如果div1有＆＃34;隐藏＆＃34;作为起始类（），它工作正常（所有过渡按预期的延迟工作），但如果起始类是＆＃34;可见＆＃34;，第一次按下按钮，div自动隐藏，忽视过渡。

我环顾四周，一无所获。看来是第一个

编辑：修复了代码上的拼写错误，其中包含div的名称。

Answer 1

最重要的是，条件 if ... className ==＆＃39; visible＆＃39 ;;否则如果... className ==＆＃39;隐藏＆＃39; 不起作用，因为＃div1不具备这些类中的任何一个。

但无论如何第一轮动画都不起作用（元素会立即消失）。原因是你必须在将.hidden类应用于它之前显式设置#div1的高度，将高度重置为0，而转换只有在元素的CSS参数改变时才有效。

在添加.hidden类之前立即设置单击高度时也存在问题 - 它不会再次转换。这个问题与第三段from here中描述的问题相似。

＆＃13;

function init () {
    var div1 = document.getElementById('div1');
    div1.style.height = div1.clientHeight + 'px';
    
    function hideNShow(){      
        if (div1.className.split(' ').indexOf('hidden') < 0) {
            div1.className += ' hidden';
        }
        else {
            div1.className = div1.className.replace(/(?:^|\s)hidden(?!\S)/g , '');
        }
    }
    document.getElementById('switch').addEventListener('click', hideNShow);
}
init();

＆＃13;

.smooth {
    transition: all 1s ease; 
}

/*.visible {
  visibility: visible;
  opacity: 1;
  transition: all 1s ease; 
}*/

.hidden {
    /*visibility: hidden;*/
    height: 0 !important;
    opacity: 0;
    overflow: hidden;
    /*transition: all 1s ease;*/
}

＆＃13;

<button id="switch" style="margin-bottom:20px;">Switch</button>

<div id="div1" class="smooth" style="background:#F9E6C1;">
  <div id="div2" >
    Here be HTML stuffs.
  </div>
</div>

＆＃13;

Answer 2

尝试删除visiblity：hidden和visiblity：visible

CSS 3动画在第一次调用时没有执行

2 个答案: