.fade-enter-active {
    transition: opacity 0.8s ease;
}

.fade-leave-active  {
    transition: opacity 0.3s ease; 
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.route-fade-enter-active .fade-on-route-transition {
    transition: opacity 0.8s ease;
}

.route-fade-leave-active .fade-on-route-transition {
    transition: opacity 0.3s ease; 
}

.route-fade-enter-from .fade-on-route-transition,
.route-fade-leave-to .fade-on-route-transition {
    /*
  	Hack around a Chrome 96 bug in handling nested opacity transitions.
    This is not needed in other browsers or Chrome 99+ where the bug
    has been fixed.
  */
    opacity: 0.001;
}