Optimize sidebar-dimmer & search-popup animation

This commit is contained in:
Mimi 2020-06-20 19:13:30 +08:00
parent b2ae986c0b
commit 8a5643b220
5 changed files with 9 additions and 16 deletions

View File

@ -17,7 +17,6 @@
border-radius: 50%; border-radius: 50%;
content: ' '; content: ' ';
height: 10px; height: 10px;
left: 0;
margin-left: -6px; margin-left: -6px;
margin-top: -4px; margin-top: -4px;
position: absolute; position: absolute;
@ -37,7 +36,6 @@
border-radius: 50%; border-radius: 50%;
content: ' '; content: ' ';
height: 8px; height: 8px;
left: 0;
margin-left: -4px; margin-left: -4px;
margin-top: -4px; margin-top: -4px;
position: absolute; position: absolute;
@ -69,8 +67,7 @@
border-radius: 50%; border-radius: 50%;
content: ' '; content: ' ';
height: 6px; height: 6px;
left: 0; left: -4px;
margin-left: -4px;
position: absolute; position: absolute;
top: $font-size-smallest; top: $font-size-smallest;
transition: background $transition-ease; transition: background $transition-ease;
@ -110,7 +107,6 @@
background: $whitesmoke; background: $whitesmoke;
content: ' '; content: ' ';
height: 100%; height: 100%;
left: 0;
margin-left: -2px; margin-left: -2px;
position: absolute; position: absolute;
top: 1.25em; top: 1.25em;

View File

@ -42,17 +42,14 @@
bottom: 0; bottom: 0;
content: ''; content: '';
height: 2px; height: 2px;
left: 0;
position: absolute; position: absolute;
transform: scaleX(0); transform: scaleX(0);
transition: transform $transition-ease; transition: transform $transition-ease;
visibility: hidden;
width: 100%; width: 100%;
} }
&:hover::before { &:hover::before {
transform: scaleX(1); transform: scaleX(1);
visibility: visible;
} }
.fa-external-link-alt { .fa-external-link-alt {

View File

@ -9,14 +9,13 @@
left: 0; left: 0;
position: fixed; position: fixed;
top: 0; top: 0;
transition: visibility 0s linear .2s, background .2s; transition: visibility .4s, background .4s;
visibility: hidden; visibility: hidden;
width: 100%; width: 100%;
z-index: $zindex-4; z-index: $zindex-4;
.search-active & { .search-active & {
background: rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .3);
transition: background .2s;
visibility: visible; visibility: visible;
} }
} }
@ -27,7 +26,7 @@
height: 80%; height: 80%;
margin: auto; margin: auto;
transform: scale(0); transform: scale(0);
transition: transform .2s; transition: transform .4s;
width: 700px; width: 700px;
.search-active & { .search-active & {

View File

@ -19,7 +19,7 @@
main-container(); main-container();
} }
@keyframes iconAnimate { @keyframes icon-animate {
0%, 100% { 0%, 100% {
transform: scale(1); transform: scale(1);
} }
@ -62,7 +62,7 @@
margin: 0 5px; margin: 0 5px;
if (hexo-config('footer.icon.animated')) { if (hexo-config('footer.icon.animated')) {
animation: iconAnimate 1.33s ease-in-out infinite; animation: icon-animate 1.33s ease-in-out infinite;
} }
} }

View File

@ -7,17 +7,18 @@
background: black; background: black;
display: block; display: block;
height: 100%; height: 100%;
left: 100%; left: 0;
opacity: 0; opacity: 0;
position: fixed; position: fixed;
top: 0; top: 0;
transition: visibility .4s, opacity .4s;
visibility: hidden;
width: 100%; width: 100%;
z-index: $zindex-1; z-index: $zindex-1;
.sidebar-active & { .sidebar-active & {
opacity: .7; opacity: .7;
transform: translateX(-100%); visibility: visible;
transition: opacity .5s;
} }
} }
} }