Temporary flash of new content

[domchristie]

When using non-view-transition animations alone, there's a temporary flash of the new content before enter. Current solution is to use v2.1.0 (where view transitions are disabled by default)

[domchristie]

Current solution is to use v2.1.0 (where view transitions are disabled by default)

Or ensure that the target elements aren't visible during the view transition:

.turn-view-transitions.turn-transition [data-turn-enter],
.turn-view-transitions.turn-before-transition [data-turn-enter] {
  opacity: 0;
}

[pascallaliberte]

@domchristie Am I correct in assuming that setting opacity to 0 will still keep the view-transition delay in between exit/enter animations? I'd like to knock that delay down to 0 as well.

[domchristie]

@pascallaliberte I'm not 100% sure (it's been a while since my head has been in this stuff), but I think there will still be a delay.

If you look at the example here: https://domchristie.github.io/turn/examples/hybrid-basic/ the main body exits (with a traditional CSS animation), the navigation elements transition (with view transitions), then the new body enters (traditional CSS animation).

A more advanced approach uses a traditional CSS animation for exit (so that navigation feedback is immediate), then uses view transitions for enter.