我試圖讓一個面板在選擇觸發器時向上滑動。這是在我的片段。問題在於#proposal-panel
內的內容正在顯示,儘管我的#proposal-panel
設置爲opacity: 0
,直到點擊觸發器(添加了.active
)。它顯示在頁面的底部。Div的內容顯示不透明度設置爲0
此外,由於某種原因,在我的實際網站上,面板不能滑動。我有很多部分,就像這個例子。該面板僅設置在頁面的底部。添加活動類時發生的唯一情況是z-index
生效。
我希望面板在觸發時從底部滑動到頂部。這是我正在嘗試在活動課程中使用translateY
。
有誰知道爲什麼內容顯示,可能爲什麼面板不滑動?
$('#proposal-trigger').on('click', function() {
\t \t $('#proposal-panel').addClass('active');
\t });
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
\t background: #3B3B3B;
\t width: 100px;
\t height: 100px;
\t position: fixed;
\t bottom: 0;
\t right: 200px;
}
#proposal-panel {
\t background: #333333;
\t width: 58%;
\t height: 100vh;
\t position: fixed;
\t padding: 15px 0;
\t right: 0;
\t bottom: -100vh;
\t opacity: 0;
\t transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
\t transition: ease 0.3s;-webkit-transition: ease 0.3s;
\t transform: translateY(0vh);-webkit-transform: translateY(0vh);
\t bottom: 0;
\t top: 0;
\t z-index: 99;
\t 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-panel'。 – Paul
@Paul然後將輸入放在'#proposal-panel'中...? –
@Paul *「問題是#proposal-panel內的內容正在顯示,儘管我已將#proposal-panel設置爲opacity:0,」*不,它們不是。 '#proposal-panel'中沒有任何內容 –