I added a basic view transition and am sharing the code for your use.
@media (prefers-reduced-motion: no-preference){
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: fadeOutDown 0.5s ease-out forwards;
}
::view-transition-new(root) {
animation: fadeInDown 0.8s ease-in forwards;
}
#brx-header {
--content-gap: 0;
}
.dwc-nest-nav-items > li{
width:auto;
}
@keyframes fadeOutDown {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-40px); /* Adjust distance as needed */
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(20px); /* Adjust distance as needed */
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
