javascript - div的css过渡效果

Question

我有以下代码。

function showOrHideDiv() {
			var e = document.getElementById('pageRightMenu');
			var l = document.getElementById('pageLeftMenu');
			if (e.style.display == 'block') {
				e.style.display = 'none';
				l.style.width = '99%';
				l.style.transition = "all 2s";       // Standard syntax
				l.style.WebkitTransition = "all 2s"
			}
			else {
				l.style.width = '60%';
				l.style.transition = "width 2s";       // Standard syntax
				l.style.WebkitTransition = "width 2s";
				e.style.display = 'block';

			}
		}

html,
body {
  position: fixed;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

.blended_grid {
  display: block;
  width: 100%;
  overflow: auto;
  width: 100%;
  height: 100%;
  /* Webkit 35: */
  -webkit-animation: fadeIn 1s linear;
  /* Firefox 28, Opera 22, IE 11: */
  animation: fadeIn 1s linear;
}

.pageHeader {
  background-color: rgba(0, 0, 0, 0.5);
  float: left;
  clear: none;
  height: 20%;
  width: 100%;
  border: 1px solid black;
}

.pageLeftMenu {
  background-color: rgba(0, 0, 0, 0.5);
  float: left;
  clear: none;
  height: 80%;
  width: 100%;
  border: 1px solid black;
}

.pageRightMenu {
  background-color: rgba(0, 0, 0, 0.5);
  float: right;
  clear: none;
  height: 80%;
  width: 39%;
  border: 1px solid black;
}

<div class="blended_grid">
  <div class="pageLeftMenu" id="pageLeftMenu">
    <input type="button" value="Click Me!" onClick="showOrHideDiv()" />
  </div>
  <div class="pageRightMenu" id="pageRightMenu" style="display: none">
    This a textF
  </div>
</div>

这里作为我要求的一部分，我创建了2个div，在左边的div中有一个按钮，当我点击时，另一个div会出现或消失，一切都很好，但我想要一个隐藏或显示 div 时的 css 过渡效果。

更新:

我可以进行转换。我已经尝试了一个 js 函数，它正在做我实际需要的事情(在这个问题中更新)，但是当你显示第二个 div 时，div 首先出现在下面，然后出现在另一个 div 旁边。我该如何修复它，我的意思是，在整个转换之后，第二个 div 应该是可见的

请运行代码片段以更好地理解我的问题。

请让我知道我该怎么做。

谢谢

Answer 1

我推荐使用 jQuery fadeOut() 函数，它将不透明度设置为零，然后在动画结束时将“display”属性设置为“none”:

function showOrHideDiv() {
   var $e = $(document.getElementById('pageRightMenu'));
   var l = document.getElementById('pageLeftMenu');
   if ( $e.is(":visible") ) {  //safer comparison in case you change things later
      l.style.width = '100%';
      $e.fadeOut(500);   //fade out, taking 500ms
   } else {
      l.style.width = '60%';
      $e.fadeIn(500);    //fade in, taking 500ms
   }
}