javascript - Div的内容显示为不透明度设置为0

选择触发器时，我试图使面板向上滑动。这在我的代码段中有效。问题是，即使我将#proposal-panel设置为#proposal-panel，也要显示opacity: 0中的内容，直到单击触发器（添加了.active）为止。它显示在页面底部。

另外，由于某些原因，在我的实际网站上，面板没有滑动。就像示例一样，我有多个部分。该面板仅设置在页面底部。添加活动类时发生的唯一事情是z-index生效。

我希望触发时面板从底部滑动到顶部。这就是我正在尝试使用活动类中的translateY的方法。

有谁知道为什么显示内容以及为什么面板没有向上滑动？

Here is a fiddle.

$('#proposal-trigger').on('click', function () {
		$('#proposal-panel').addClass('active');
	});

#red {
  height: 100vh;
  width: 100%;
  background: red;
}
#blue {
  height: 100vh;
  width: 100%;
  background: blue;
}
#proposal-trigger {
	background: #3B3B3B;
	width: 100px;
	height: 100px;
	position: fixed;
	bottom: 0;
	right: 200px;
}
#proposal-panel {
	background: #333333;
	width: 58%;
	height: 100vh;
	position: fixed;
	padding: 15px 0;
	right: 0;
	bottom: -100vh;
	opacity: 0;
	transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
	transition: ease 0.3s;-webkit-transition: ease 0.3s;
	transform: translateY(0vh);-webkit-transform: translateY(0vh);
	bottom: 0;
	top: 0;
	z-index: 99;
	opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
  <input>
  <input>
</div>
<div id="proposal-panel"></div>

最佳答案

假设它是您在底部看到的小黑框，来自#proposal-trigger。 #proposal-panel隐藏。我从#proposal-trigger中删除​​了背景色以消除这种情况。

要使元素向上滑动，请使用transform: translate()。

$('#proposal-trigger').on('click', function() {
  $('#proposal-panel').addClass('active');
});

#red {
  height: 100vh;
  width: 100%;
  background: red;
}

#blue {
  height: 100vh;
  width: 100%;
  background: blue;
}

#proposal-trigger {
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 0;
  right: 200px;
}

#proposal-panel {
  background: #333333;
  width: 58%;
  height: 100vh;
  position: fixed;
  padding: 15px 0;
  right: 0;
  opacity: 0;
  transition: 0.3s;
  transform: translateY(100%);
  bottom: 0;
}

#proposal-panel.active {
  transform: translateY(0);
  z-index: 99;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
  <input>
  <input>
</div>
<div id="proposal-panel"></div>

关于javascript - Div的内容显示为不透明度设置为0，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43640068/