2017-04-26 92 views
2

我試圖讓一個面板在選擇觸發器時向上滑動。這是在我的片段。問題在於#proposal-panel內的內容正在顯示,儘管我的#proposal-panel設置爲opacity: 0,直到點擊觸發器(添加了.active)。它顯示在頁面的底部。Div的內容顯示不透明度設置爲0

此外,由於某種原因,在我的實際網站上,面板不能滑動。我有很多部分,就像這個例子。該面板僅設置在頁面的底部。添加活動類時發生的唯一情況是z-index生效。

我希望面板在觸發時從底部滑動到頂部。這是我正在嘗試在活動課程中使用translateY

有誰知道爲什麼內容顯示,可能爲什麼面板不滑動?

Here is a fiddle.

$('#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>

回答

3

假設這是你在底部看到小黑盒子,從#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>

+0

深灰色框本質上是一個按鈕,應該是有,但是輸入我不是想要顯示,直到顯示大面板'#proposal-panel'。 – Paul

+0

@Paul然後將輸入放在'#proposal-panel'中...? –

+0

@Paul *「問題是#proposal-panel內的內容正在顯示,儘管我已將#proposal-panel設置爲opacity:0,」*不,它們不是。 '#proposal-panel'中沒有任何內容 –

1

你並不需要使用平移Y做到這一點的動畫,只需要使用頂部和底部與固定位置。並刪除#提議觸發的背景顏色,所以它不顯示了

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