54 lines
1.4 KiB
CSS
54 lines
1.4 KiB
CSS
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.fade-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(0.5rem);
|
|
}
|
|
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-0.5rem);
|
|
}
|
|
|
|
/* Search dialog close: reverse of the open FLIP morph (--morph-* set in
|
|
SearchTrigger.vue); reka-ui's Presence waits for these animations. */
|
|
.search-overlay[data-state='closed'] {
|
|
animation: search-fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
.search-dialog[data-state='closed'] {
|
|
animation: search-morph-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
@keyframes search-fade-out {
|
|
from { opacity: var(--morph-from-opacity, 1); }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
/* The `from` frame starts from the snapshot SearchTrigger.vue wrote before
|
|
cancelling the opening animation, so a mid-flight close does not flash the
|
|
full visible state first. */
|
|
@keyframes search-morph-out {
|
|
from {
|
|
transform: var(--morph-from-transform, none);
|
|
opacity: var(--morph-from-opacity, 1);
|
|
}
|
|
to {
|
|
transform: translate(var(--morph-x, 0px), var(--morph-y, 0px))
|
|
scale(var(--morph-sx, 1), var(--morph-sy, 1));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Honor the user's reduced-motion preference for the route transition
|
|
(Docs.vue also keeps its transition name empty in that case). */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: none;
|
|
}
|
|
}
|