-
Notifications
You must be signed in to change notification settings - Fork 687
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-view-transitions-2] Creating 'classes' of transition groups #8319
Comments
With the first proposal, what happens if |
Another option (probably useful but not enough) might be to support a syntax similar to attribute selectors. For elements with ::view-transition-old(^=box-) {
/* … */
} |
Similar to @nhoizey's idea, could be supporting ::view-transition-old(box-*) {
/* … */
} |
Any use of characters that are currently valid within identifiers would be backwards incompatible. I haven't checked if that includes *. |
Is this feature intended to solve the sharing problem with view transition animations? Currently if I want to share some animation, for example a slide animation, the best way I can think to do so is to create a custom property like: I think with this proposal I could instead share some CSS and to use the animation only requires setting the ::view-transition-group(*, slide) {
&::view-transition-old(*) {
animation: ...
}
&::view-transition-new(*) {
animation: ...
}
} Then usage: .my-selector {
view-transition-name: header;
view-transition-class: slide;
} Does this sound correct? |
I like this proposal. It would remove the need for an extra An alternative idea to Jake’s original syntax suggestion that popped up: reuse the namespace selector syntax, like so: .box {
view-transition-class: box;
}
::view-transition-group(box|*) {
/* … */
} |
I think I like the .transition-slide {
view-transition-class: slide;
} The solutions that depend on |
Could this support selectors like: I'm not familiar with the namespace selector syntax, so I'll have to look into that, but my initial thought was that this feature could reuse the attribute selector syntax. |
One thing that an explicit class name gives us is an ability to say if you say |
But if you have two elements in the old state, all with the same class:
And in the new state you have three elements, all with the same class:
How are they matched into groups? Element equality won't work for MPA ever, and it'll become a gotcha with frameworks when their diffing algorithms don't quite do the right thing. DOM order will fail for the above case. |
This would only do element equality. My comment was to address a different issue we've seen where people want to specifically match an element with itself in SPA without needing to come up with unique names for everything; something like
|
It might be useful. But, in order for it to work reliably in frameworks, you need to assign a key to elements so the diffing algorithm has a fighting chance of getting it right. And, if you're having to assign a key, you may as well assign a |
Agreed The question is should we allow |
Rewinding a little bit back: I’m OK with having When it is set:
::view-transition-new(card) {
…
}
.card {
view-transition-group: card;
} To make this work with MPA, I think the solution lies in #9141 (dynamically construct ::view-transition-new(card) {
…
}
.card {
view-transition-group: card;
view-transition-name: ident("card-", attr(id));
} This way, across pages, the same |
This is problematic from the current spec perspective. Specifically, things like step 3.9.5 of pseudo element set up algorithm uses the name to generate a dynamic style sheet targeting My thought is that presence of |
+1. We need some way for UA CSS to target the element. We can define something magical internally but doesn't seem like that's necessary.
I like this direction. Ideal would be if this new CSS property also helps you target a set of generated pseudo-elements. So something like:
In the example above, the UA computes a
|
Instead of adding a new property, suggesting to allow multiple idents in
So for example, a song in a playlist can have the following rule: It would only match an element in the new state if it's also Together with a solution for #8320, this can solve the use-case without having to invent new syntax for the pseudo-element selector. |
The plan above SGTM. Re: inventing new syntax, I'm actually ok if we allow a comma separated list so a selector would apply if any of the items in the list are part of that pseudos view-transition-name set. That'll make it match |
Documenting a couple of syntax ideas below for this:
|
OK I like
OK this can work. I'm OK with bringing something like these two options to the csswg,. |
Sounds good to me as well. With the types proposal, would this all look like
? We should bikeshed at some point 😃 |
I like the options where the class goes in the pseudo better. The
The “regular”
What I like about this syntax is that it would be (almost*) identical to what you type as a value for the proposed shorthand: first the v-t-name and then the v-t-class(es). This should be the same here, so you’re good once you know it. (*) only difference is that you need to replace |
I agree on @bramus on all points here. |
That would have any semantics (in this case, either class1 or class2 would be selected).
Yea but we could also change the shorthand proposal to match what we decide here, e.g. |
O yeah, I see … with the comma, people will interpret it as an or.
I wouldn’t mix selector syntax (classes) with |
In terms of old/new classes, here's how it can happen: const element = document.querySelector('.whatever');
element.style.viewTransitionName = 'foo';
element.style.viewTransitionClass = 'class-before';
document.startViewTransition(() => {
element.style.viewTransitionClass = 'class-after';
}); The above will result in #8319 (comment) proposes But in this case: const element = document.querySelector('.whatever');
element.style.viewTransitionName = 'foo';
element.style.viewTransitionClass = 'class-before';
document.startViewTransition(() => {
element.remove();
}); #8319 (comment) proposes This pattern could be summarised as "last captured classes win". @noamr in this case: const element = document.querySelector('.whatever');
element.style.viewTransitionName = 'foo';
element.style.viewTransitionClass = 'class-before';
document.startViewTransition(() => {
element.style.viewTransitionClass = 'none';
}); …assuming |
Exactly. The mental model is that the class is for the entire view-transition group (pair or single element). So setting it sets it for the group, unsetting it unsets it for the group. |
This explanation was very helpful. Thank you! |
The CSS Working Group just discussed
The full IRC log of that discussion<frances_> Alan: next issue is 8319 on classes of transition groups<frances_> vladimir: have view-transition-name, can be repetitive, introduce view-transition-class to apply to multiple elements, and prevent repeating. Separate list of custom items to name the classes. For the selection, the view-transition pseudo-element can select the class, few options listed in the issue on how to select it such as dots in brackets, dots outside the brackets. No strong preference. <fantasai> https://github.com//issues/8319#issuecomment-1852207709 <frances_> vladimir: the semantics will be the last capture wins. If exit transition, the old capture will win, if an entry transition, class overrides old element. <frances_> Alan: any objections? <TabAtkins> q+ <frances_> Alan: any opinions? <astearns> ack TabAtkins <khush> q+ <frances_> tab: use case for class sounds great, good idea, for syntax lean towards class selector syntax into pseudo elements, least clumsy, names and classes, syntaxically distinguished <frances_> Alan: which option is it? <frances_> vladimir: option 1? <frances_> Vladimir: option 1. <astearns> ack khush <TabAtkins> ::view-transition-group(*.class1.class2) <frances_> khush: second what tab said, like option 2, if dark-class is a prefix, then will be a subtle difference in class declaration <frances_> tab: true for hover pseudo class in dom class, for css selector syntax, doesn't allow it, prefer option 1 <TabAtkins> :hover::before and ::before:hover are currently both valid and mean different things in exactly that way <vmpstr> s/dark-class/dot class/ <khush> ^ I +1'd option 1. :) <astearns> ack florian <astearns> ack fantasai <frances_> fantasai: comment from someone in thread to introduce shorthand for view-transition-name and view-transition-class, can be reflected in both. Possibly between 1 and 4. <frances_> Alan: any other opinions? <fantasai> s/can be reflected in/can choose a syntax that works for/ <fantasai> s/Possibly between/That would likely be option 4. But I like both/ <frances_> Alan: Possibly resolve on option 1 <frances_> vladimir: yes <frances_> PROPOSAL: Go with option 1 for the syntax in creating view-transition-class <frances_> Alan: any objections? <frances_> RESOLVED: Go with option 1 for the syntax in creating view-transition-class |
Can someone clarify what option 1 looks like? Great to see alignment on this. |
@nmn from #8319 (comment) above
|
I'm not against a shorthand here, but I'm not sure it would be useful. In this thread, code examples are like: .box-1 {
view-transition-name: box-1;
view-transition-class: box;
}
.box-2 {
view-transition-name: box-2;
view-transition-class: box;
} But I think real usage will be more like: .box-1 {
view-transition-name: box-1;
}
.box-2 {
view-transition-name: box-2;
}
.box {
view-transition-class: box;
} Assuming markup like: <div class="box box-1"></div>
<div class="box box-2"></div> |
QQ: |
Still required, classes are one step towards no needing it but not the only step. |
I'm not aware of another way of associating two different elements across documents than some kind of identifier, but I might just lack imagination. |
Cross document, I also don't see another way to associate elements. For same document transitions though, there is a possibility of using element object itself as the matching condition. I know this doesn't play too well with frameworks, but I believe at least some frameworks have an ability for the developer to hint that some elements have to stay the same. But I agree with @noamr, there are plenty of discussion to be had here. I'd prefer that we close out this issue with the spec edits for |
#8320 is the relevant issue for this. |
OK. That makes sense. We can generate unique IDs for each element, so the requirement is OK. |
A `view-transition-class` property allows specifying view-transition pseudo-elements that apply to multiple participating elements without having to replicate them. In this PR: - Specifying `view-transition-class` - Extending the pseudo-element syntax to support `::view-transition-foo(name.class)` - Extending the capture algorithms and data structure to capture the classes - Added a simple example for using classes Based on [this resolution](w3c#8319 (comment)). Closes w3c#8319
A `view-transition-class` property allows specifying view-transition pseudo-elements that apply to multiple participating elements without having to replicate them. In this PR: - Specifying `view-transition-class` - Extending the pseudo-element syntax to support `::view-transition-foo(name.class)` - Extending the capture algorithms and data structure to capture the classes - Added a simple example for using classes Based on [this resolution](w3c#8319 (comment)). Closes w3c#8319
…nding algorithms (#9773) * [css-view-transitions-2] Add 'view-transition-class' A `view-transition-class` property allows specifying view-transition pseudo-elements that apply to multiple participating elements without having to replicate them. In this PR: - Specifying `view-transition-class` - Extending the pseudo-element syntax to support `::view-transition-foo(name.class)` - Extending the capture algorithms and data structure to capture the classes - Added a simple example for using classes Based on [this resolution](#8319 (comment)). Closes #8319 --------- Co-authored-by: Khushal Sagar <[email protected]> Co-authored-by: vmpstr <[email protected]>
https://codepen.io/jaffathecake/pen/VwBprqL
In this example there are lots of boxes. Each has a unique
view-transition-name
, but each animates in the same way.In the demo, I'm able to use selectors like
::view-transition-group(*)
to target all of them, but that's only because they're the only thing animating. That's unlikely to be the case in the real world.It'd be nice to have a way to style the animation of all of the boxes at once.
Some ideas:
The pseudo-class selector is
::view-transition-group(view-transition-name, view-transition-class)
. Unlikeview-transition-name
, many elements can be given the sameview-transition-class
.This style of selector would work on the other pseudo-elements too, such as
::view-transition-new(view-transition-name, view-transition-class)
.(I can't think of a good name for this. I know the current name is bad)
:element-class(ident)
matches a view transition pseudo, if either the associated outgoing or incoming element has/had a class ofident
.We could also have
:old-element-class(ident)
and:new-element-class(ident)
to work with classes specifically on the outgoing or incoming element.The text was updated successfully, but these errors were encountered: