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">
|
||||
@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 {
|
||||
color: inherit;
|
||||
position: relative;
|
||||
@ -242,7 +257,7 @@ export default Vue.extend({
|
||||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #8882;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease-out 0.2s;
|
||||
transition: opacity 0.2s ease-out 0.2s;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
@ -271,6 +286,9 @@ export default Vue.extend({
|
||||
background-color: transparent !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
> * {
|
||||
@include default-transition();
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.disabled) .popup-container {
|
||||
@ -278,7 +296,7 @@ export default Vue.extend({
|
||||
top: calc(100% - 8px);
|
||||
left: 50%;
|
||||
pointer-events: none;
|
||||
@include default-transition();
|
||||
transition: all 0.2s ease-out 0.2s;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover,
|
||||
@ -286,8 +304,7 @@ export default Vue.extend({
|
||||
.popup-container {
|
||||
top: 100%;
|
||||
> .popup {
|
||||
// transform: translateY(0) translateX(-50%);
|
||||
pointer-events: initial;
|
||||
animation: navbar-popup-in 0.2s ease-out 0.2s both;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,11 +59,11 @@ export default Vue.extend({
|
||||
position: absolute;
|
||||
width: 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 & {
|
||||
transform: scale(2) translateY(10px);
|
||||
z-index: 100;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.user-face {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user