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

View File

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

View File

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

View File

@ -19,7 +19,7 @@
main-container();
}
@keyframes iconAnimate {
@keyframes icon-animate {
0%, 100% {
transform: scale(1);
}
@ -62,7 +62,7 @@
margin: 0 5px;
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;
display: block;
height: 100%;
left: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
transition: visibility .4s, opacity .4s;
visibility: hidden;
width: 100%;
z-index: $zindex-1;
.sidebar-active & {
opacity: .7;
transform: translateX(-100%);
transition: opacity .5s;
visibility: visible;
}
}
}