mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Improve navbar animations (#4949)
This commit is contained in:
parent
b50a6796bf
commit
5aa8b4ed38
@ -170,6 +170,21 @@ export default Vue.extend({
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'common';
|
@import 'common';
|
||||||
|
|
||||||
|
@keyframes navbar-popup-in {
|
||||||
|
to {
|
||||||
|
pointer-events: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// @keyframes navbar-popup-out {
|
||||||
|
// from {
|
||||||
|
// pointer-events: none;
|
||||||
|
// }
|
||||||
|
// to {
|
||||||
|
// pointer-events: none;
|
||||||
|
// opacity: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.custom-navbar-item {
|
.custom-navbar-item {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -242,7 +257,7 @@ export default Vue.extend({
|
|||||||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
|
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
|
||||||
border: 1px solid #8882;
|
border: 1px solid #8882;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
transition: all 0.2s ease-out 0.2s;
|
transition: opacity 0.2s ease-out 0.2s;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -271,6 +286,9 @@ export default Vue.extend({
|
|||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
> * {
|
||||||
|
@include default-transition();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.disabled) .popup-container {
|
&:not(.disabled) .popup-container {
|
||||||
@ -278,7 +296,7 @@ export default Vue.extend({
|
|||||||
top: calc(100% - 8px);
|
top: calc(100% - 8px);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@include default-transition();
|
transition: all 0.2s ease-out 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.disabled):hover,
|
&:not(.disabled):hover,
|
||||||
@ -286,8 +304,7 @@ export default Vue.extend({
|
|||||||
.popup-container {
|
.popup-container {
|
||||||
top: 100%;
|
top: 100%;
|
||||||
> .popup {
|
> .popup {
|
||||||
// transform: translateY(0) translateX(-50%);
|
animation: navbar-popup-in 0.2s ease-out 0.2s both;
|
||||||
pointer-events: initial;
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -59,11 +59,11 @@ export default Vue.extend({
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: 0.2s all ease-out;
|
transition: 0.2s all ease-out 0.2s;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 100;
|
||||||
.custom-navbar-item:hover & {
|
.custom-navbar-item:hover & {
|
||||||
transform: scale(2) translateY(10px);
|
transform: scale(2) translateY(10px);
|
||||||
z-index: 100;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.user-face {
|
.user-face {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user