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;