Question

我试图在选择触发器时让面板向上滑动。这是在我的片段中工作。问题是即使我将#proposal-panel设置为#proposal-panel，opacity: 0内的内容也会显示，直到点击触发器（.active已添加）。它显示在页面底部。

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

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

有没有人知道为什么内容会显示，以及为什么面板没有滑动？

Here is a fiddle.

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

你不需要使用translateY来做这个动画，只需要使用顶部和底部的固定位置。并从＃proposal-trigger中删除背景颜色，以便它不再显示

Here is a demo

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

<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
  <input>
  <input>
</div>
<div id="proposal-panel"></div>

#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%;
    position: fixed;
    padding: 15px 0;
    right: 0;
    bottom: 0;
  top: 100%;
    opacity: 0;
    transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
    transition: ease 0.3s;-webkit-transition: ease 0.3s;
    bottom: 0;
    top: 0;
    z-index: 99;
    opacity: 1;
}

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

2 个答案: