How to disable view transitions on elements when I'm animating in startViewTransition?
So, I have
view-transition-name
here and there on various elements of my content, so that when I move from page to page they transition nicely and all.
I just added an intra-page view transition on my theme-toggling button so that when I switch between light and dark, the new color scheme appears to reveal itself from the button.
It works well, except the elements that have a view-transition toggle between light/dark immediately, which results in flicker in those elements: the element changes its colors to match the new color palette while on the page with the old theme, so it's basically invisible until the area with the new theme applied expands to cover it.
It seems view transitions are unaffected by transition-property
, so trying to restrict transitions only to layout-related properties on those elements had no effect.
Is there maybe a pseudo selector triggered while same-page view transitions are happening? Any other idea?
Here's a slowed-down video. The date-time on the left has a cross-page view transition name and is affected.12 Replies
I removed all the
view-transition-name
styles for now…If you post your code in codepen or codesandbox or scrimba youre more likely to get help. The guys that frequently volunteer their time cant do much with a screen recording .
kudos on playing w view-transitions though. i'm super excited about them and dont see people playing with them at all.
@clevermissfox The cross-page ones were performing very badly on my (admitedly low-end) phone, so I think removing them was a good decision. The technology doesn't seem mature enough for production, too —browser support is limited and buggy. I find the lone in-page transition on the theme toggler to give a much nicer touch!
I guess my phone is too busy loading up the new DOM to render the transitions with any acceptable frame rate 😄
(even when the page is prefetched already)
It looked pretty cool on desktop, tho
It's definitely only supported enough for progressive enhancement, support is not there for production without checking for @supports or checking wiyh javascript but when works it works nicely and it's fun to play with and wrap your brain around so we will be ready when it is supported!
I mean even when it's supported, there are glitches like the ones above. In Safari TP it's even worse, the elements with a view-transition-name property weren't just flickering as shown above but would completely vanish from the page.
I wouldn't count TP as supported. Chrome is the only browser that seems stable with it.
It kind of felt like the implementators assumed view-transition-name = MPA and startViewTransition = SPA and nobody would use both.
Or maybe it generally works and the bug is just because I manage light/dark with
only-color-scheme
Ohhh I haven't tried using ::view-transition-old inside those rules, that could be it. Let me test that.
nope…
i guess the real issue is that color-scheme
is not animatable 😅
Maybe I should use color-mix()
on my light-dark
colors and their reverse, use a css variable to slide from 0 to 1 and animate that variable.Relative colors is gaining support too , that one I’m very very excited for, I find myself in need of it constantly
You can also make variables for your main colours for the rgb or hsl or oklch and change those as needed
so, just fyi, this level of nestedness doesn't work 😄
![No description](https://cdn.answeroverflow.com/1265594583681601609/Screenshot_2024-07-24_at_18.00.11.png)
(I tried to implement a slide between my current light-dark colors and their counterpart in the other theme)
Yeah light-dark won’t work like that but the other way around should
You can also separate it in an @prefers or a data—attr that’s triggered on a toggle
ohh it's even weirder, lightningcss actually replaces my light-darks with it's own stuff
You can also separate it in an @prefers or a data—attr that’s triggered on a toggleThat's the old way, yes I switched to merging using
light-dark()
and just rely on color-scheme
.
This works:
Now I can try to animate --to-light