Question

我是以下代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

更新

我能够完成转换。我尝试过一个js函数，它正在做我真正需要的（在这个问题中更新），但当你显示第二个div时，div首先出现在下面，然后出现在另一个div旁边。我怎么能修复它，我的意思是，在整个过渡之后，第二个div应该是可见的

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

请让我知道我该怎么做。

由于

Answer 1

我建议使用jQuery fadeOut()函数，该函数将不透明度设置为零，然后设置＆＃34; display＆＃34;财产到＆＃34;无＆＃34;动画结束时：

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

Answer 2

这是你如何做到的：

使用display: flex

flexbox

使用pageLeftMenu为flex: 0 0 auto提供“固定”宽度，这意味着宽度将取自width属性（因此设置为动画）
使用pageRightMenu为flex: 1 1 0提供“灵活”的宽度，这意味着它将占用pageLeftMenu未使用的父级中的所有剩余空间。

以下示例显示了效果。有关flexbox的更多信息，请查看本指南：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

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: flex;    //instead of 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%;
  flex: 0 0 auto;    //use the width property to determine width
  border: 1px solid black;
}

.pageRightMenu {
  background-color: rgba(0, 0, 0, 0.5);
  float: right;
  clear: none;
  height: 80%;  
  flex: 1 1 0;       //use up all remaining space
  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>

div的css过渡效果

2 个答案: