Der Inhalt von Div wird mit einer Opazität von 0 dargestellt 0

Question

Ich versuche, ein Panel nach oben zu schieben, wenn ein Trigger ausgewählt wird. Dies funktioniert in meinem Snippet. Das Problem ist, dass der Inhalt innerhalb der #proposal-panel angezeigt wird, obwohl ich #proposal-panel auf opacity: 0 festgelegt habe, bis der Auslöser angeklickt wird (.active wird hinzugefügt). Es wird am Ende der Seite angezeigt.

Auch, aus irgendeinem Grund auf meiner tatsächlichen Website, rutscht das Panel nicht nach oben. Ich habe mehrere Abschnitte, genau wie im Beispiel. Das Panel wird nur am unteren Rand der Seite angezeigt. Das einzige, was passiert, wenn die aktive Klasse hinzugefügt wird, ist die z-index wird wirksam.

Ich möchte die Platte von unten nach oben gleiten, wenn ausgelöst. Das versuche ich mit translateY in der aktiven Klasse.

Weiß jemand, warum der Inhalt angezeigt wird und möglicherweise, warum das Panel nicht nach oben rutscht?

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>

Answer 1

Unter der Annahme, es der kleine schwarze Kasten ist man unten sehen, das ist von #proposal-trigger. #proposal-panel ist ausgeblendet. Ich entfernte die Hintergrundfarbe von #proposal-trigger, um das loszuwerden.

Und damit das Element nach oben gleitet, verwenden Sie 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

Sie brauchen nicht translateY zu verwenden, um diese Animationen zu tun, müssen nur mit der festen Position oben und unten verwenden. Und entfernen Sie die Hintergrund-Farbe von # Vorschlag-Trigger, so dass es nicht mehr funktioniert zeigen

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