Re: [csswg-drafts] [css-view-transitions-2] MPA: 'back' transitions (#8685)

Note that this is possible to achieve with a bit of JS even for MPA. Though of course a declarative solution would be much preferable.

For example, this PoC would slide from the top when going forward, from the bottom when going backwards, and fade in when reloading:
```js
 switch (performance.navigation.type) {
  case PerformanceNavigation.TYPE_RELOAD:
   document.documentElement.dataset.navDirection = "reload";
   break;
  case PerformanceNavigation.TYPE_BACK_FORWARD: {
   const prev = sessionStorage.getItem("prev-url");
   console.log(prev, document.referrer)
   document.documentElement.dataset.navDirection = document.referrer === prev ? "forward" : "back";
   break;
  }
  default:
   document.documentElement.dataset.navDirection = "forward";
 }

 sessionStorage.setItem("prev-url", location.href)
```

```css
@keyframes slide-in {
  from { transform: translateY(-100%) }
  to { transform: none}
}

@keyframes slide-out {
  from { transform: translateY(100%) }
  to { transform: none}
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}

::view-transition-group(root) {
  animation-name: slide-in;
  animation-duration: 1s;
}

html[data-nav-direction="back"]::view-transition-group(root) {
  animation-name: slide-out;
  animation-duration: 1s;
}

html[data-nav-direction="reload"]::view-transition-group(root) {
  animation-name: fade-in;
  animation-duration: 1s;
}
```



-- 
GitHub Notification of comment by noamr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8685#issuecomment-1568164673 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 30 May 2023 10:09:51 UTC