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

Question

我试图让面板在选择触发器时向上滑动。这在我的代码片段中有效。问题是 #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>

Answer 1

假设它是您在底部看到的小黑框，它来自 #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>