Transitionground

    .slideToDown {
      view-transition-name: slide-to-down-transition;
    }
    
    ::view-transition-old(slide-to-down-transition) {
      animation: slide-to-up 500ms ease-in-out 1 forwards;
    }
    
    ::view-transition-new(slide-to-down-transition) {
      animation: slide-from-up 500ms ease-in-out 1 forwards;
    }

    @keyframes slide-to-up {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(100%);
      }
    }

    @keyframes slide-from-down {
      from {
        transform: translateY(-100%);
      }
      to {
        transform: translateY(0);
      }
    }