HackerTrans
トップ新着トレンドコメント過去質問紹介求人

franey

no profile record

コメント

franey
·7 か月前·議論
It looks to me like the big benefit is being able to use just one hand for this. I'd be more likely to use the watch, too, but this would be great for people with one arm, for example.
franey
·12 か月前·議論
For anyone looking to use this, I recommend using this CSS before the closing body tag. It disables the fade effect for visitors who prefer reduced motion, and the old page fades out while the new one fades in. (I've got an optional rule that keeps my header in place while the rest of the content fades out/in)

  @media (prefers-reduced-motion: no-preference) {
    body > header {
      view-transition-name: header;
    }

    @view-transition {
      navigation: auto;
    }

    ::view-transition-old(root) {
      animation: fade-out 0.3s ease;
    }
    ::view-transition-new(root) {
      animation: fade-in 0.3s ease;
    }

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