Sidebar animation is not triggered when loading page
This commit is contained in:
parent
57afcbdffb
commit
5f4b72f9be
@ -4,6 +4,18 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="{{ path '/main.css' }}">
|
||||
<title>Preview</title>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
|
||||
element.classList.add('LP-Main__Sidebar--hidden')
|
||||
})
|
||||
setTimeout(function(){
|
||||
Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
|
||||
element.classList.remove('LP-Main__Sidebar--hidden')
|
||||
})
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
{{{ yield }}}
|
||||
|
@ -95,20 +95,20 @@ body{
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-toggle-sidebar){
|
||||
.LP-Wrapper__Site{
|
||||
grid-template-columns: 0 1fr;
|
||||
}
|
||||
|
||||
@keyframes slide_out_siedebar{
|
||||
from{left: -1 * $-sidebar-width;}
|
||||
to{left: 0;}
|
||||
}
|
||||
|
||||
|
||||
@keyframes slide_in_siedebar{
|
||||
from{left: 0;}
|
||||
to{left: -1 * $-sidebar-width;}
|
||||
}
|
||||
|
||||
.LP-Wrapper__Site{
|
||||
grid-template-columns: 0 1fr;
|
||||
}
|
||||
|
||||
.LP-Main__Sidebar{
|
||||
grid-area:unset;
|
||||
width: $-sidebar-width;
|
||||
@ -118,6 +118,10 @@ body{
|
||||
height: 100vh;
|
||||
top: 60px;
|
||||
border-right: 1px solid $-light-brown;
|
||||
|
||||
&--hidden{
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#toggle_sidebar:checked ~ .LP-Main__Sidebar{
|
||||
|
@ -53,8 +53,6 @@ body {
|
||||
margin: 0; } }
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.LP-Wrapper__Site {
|
||||
grid-template-columns: 0 1fr; }
|
||||
@keyframes slide_out_siedebar {
|
||||
from {
|
||||
left: -250px; }
|
||||
@ -65,6 +63,8 @@ body {
|
||||
left: 0; }
|
||||
to {
|
||||
left: -250px; } }
|
||||
.LP-Wrapper__Site {
|
||||
grid-template-columns: 0 1fr; }
|
||||
.LP-Main__Sidebar {
|
||||
grid-area: unset;
|
||||
width: 250px;
|
||||
@ -74,6 +74,8 @@ body {
|
||||
height: 100vh;
|
||||
top: 60px;
|
||||
border-right: 1px solid #C09F80; }
|
||||
.LP-Main__Sidebar--hidden {
|
||||
visibility: hidden; }
|
||||
#toggle_sidebar:checked ~ .LP-Main__Sidebar {
|
||||
animation-name: slide_out_siedebar;
|
||||
animation-duration: .3s;
|
||||
|
Loading…
Reference in New Issue
Block a user