fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add transition to drawer-item

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-28 11:16:39 +03:00
parent 2ac40da872
commit 6d3269395a
2 changed files with 8 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
resources/css/main.scss
View File

@@ -98,7 +98,7 @@ a {
align-items: center;
transition: width 500ms;
.dropdown-nav-item {
.drawer-item {
position: relative;
opacity: 0;
margin-top: math.div(variables.$px_horizontalPadding, 4);
@@ -109,6 +109,7 @@ a {
color: transparent;
font: 600 28px "Montserrat", sans-serif;
text-decoration: none;
transition: opacity 250ms ease-in-out;
&:first-of-type {
margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -147,116 +148,6 @@ a {
}
}
.dropdown_close_animation {
-webkit-animation: drawer-close 550ms;
animation: drawer-close 550ms;
}
.dropdown-nav-item_close_animation {
-webkit-animation: navbar-disappear 550ms;
animation: navbar-disappear 550ms;
}
@-webkit-keyframes drawer-close {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes drawer-close {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@-webkit-keyframes drawer-open {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes drawer-open {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes navbar-appear {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes navbar-appear {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes navbar-disappear {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes navbar-disappear {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
#container {
min-height: 90vh;
display: grid;

13
resources/scripts/main.js
View File

@@ -2,6 +2,7 @@ const SCROLL_MIN = 100;
scroll_to_top = document.getElementById("scroll-to-top");
el_drawer = document.getElementById("drawer");
el_container = document.getElementById("container");
$drawer_item = document.querySelectorAll(".drawer-item");
function checkScroll() {
if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
@@ -20,20 +21,18 @@ async function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
let navitems = document.getElementsByClassName('dropdown-nav-item');
async function toggleDropdown() {
let expanded = el_drawer.classList.contains("expanded");
if (expanded) {
for (let i = 0; i < navitems.length; i++) {
navitems[i].classList.toggle("visible");
for (let i = 0; i < $drawer_item.length; i++) {
$drawer_item[i].classList.toggle("visible");
}
el_drawer.classList.toggle("expanded");
} else {
el_drawer.classList.toggle("expanded");
await sleep(500);
for (let i = 0; i < navitems.length; i++) {
navitems[i].classList.toggle("visible");
await sleep(250);
for (let i = 0; i < $drawer_item.length; i++) {
$drawer_item[i].classList.toggle("visible");
}
}
}