diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index a0218cf771cec7c..67698ac6782d628 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -366,7 +366,7 @@ The CSS `text-decoration-trim` property allows you to specify {{cssxref("text-de ### `@custom-media` at-rule -The [`@custom-media`](/en-US/docs/Web/CSS/Reference/At-rules/@custom-media) CSS at-rule defines aliases for long or complex media queries. Instead of repeating the same hardcoded `` in multiple `@media` at-rules, it can be defined once in a `@custom-media` at-rule and referenced throughout the stylesheet whenever needed. ([Firefox bug 1991105](https://bugzil.la/1744292)). +The [`@custom-media`](/en-US/docs/Web/CSS/Reference/At-rules/@custom-media) CSS at-rule defines aliases for long or complex media queries. Instead of repeating the same hardcoded `` in multiple `@media` at-rules, it can be defined once in a `@custom-media` at-rule and referenced throughout the stylesheet whenever needed. ([Firefox bug 1744292](https://bugzil.la/1744292)). | Release channel | Version added | Enabled by default? | | ----------------- | ------------- | ------------------- | diff --git a/files/en-us/mozilla/firefox/releases/146/index.md b/files/en-us/mozilla/firefox/releases/146/index.md index 68313c5f2caf871..2828aec2d844ed9 100644 --- a/files/en-us/mozilla/firefox/releases/146/index.md +++ b/files/en-us/mozilla/firefox/releases/146/index.md @@ -138,4 +138,4 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil - **Custom media queries**: `layout.css.custom-media.enabled` - The [`@custom-media`](/en-US/docs/Web/CSS/Reference/At-rules/@custom-media) CSS at-rule defines aliases for long or complex media queries. Instead of repeating the same hardcoded `` in multiple `@media` at-rules, it can be defined once in a `@custom-media` at-rule and referenced throughout the stylesheet whenever needed. ([Firefox bug 1991105](https://bugzil.la/1744292)). + The [`@custom-media`](/en-US/docs/Web/CSS/Reference/At-rules/@custom-media) CSS at-rule defines aliases for long or complex media queries. Instead of repeating the same hardcoded `` in multiple `@media` at-rules, it can be defined once in a `@custom-media` at-rule and referenced throughout the stylesheet whenever needed. ([Firefox bug 1744292](https://bugzil.la/1744292)). diff --git a/files/en-us/mozilla/firefox/releases/147/index.md b/files/en-us/mozilla/firefox/releases/147/index.md index ebab682c04fb8df..01ffa7afeeffbb8 100644 --- a/files/en-us/mozilla/firefox/releases/147/index.md +++ b/files/en-us/mozilla/firefox/releases/147/index.md @@ -36,6 +36,8 @@ Firefox 147 is the current [Nightly version of Firefox](https://www.firefox.com/ - The `-webkit-` prefixed version of the {{cssxref("perspective")}} property is now supported with unitless values — for example `-webkit-perspective: 800` — for increased compatibility. ([Firefox bug 1362499](https://bugzil.la/1362499)). +- [View transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) are now supported, which provide a mechanism by which different **types** can be specified for active view transitions. CSS can then be used to apply animations to DOM elements when their content updates, depending on the transition type specified. Firefox 147 adds support for single-page app (SPA) view transition types only, not cross-document view transition types. + ([Firefox bug 2001878](https://bugzil.la/2001878)). diff --git a/files/en-us/web/api/cssviewtransitionrule/index.md b/files/en-us/web/api/cssviewtransitionrule/index.md new file mode 100644 index 000000000000000..6f118afd47bb7b3 --- /dev/null +++ b/files/en-us/web/api/cssviewtransitionrule/index.md @@ -0,0 +1,60 @@ +--- +title: CSSViewTransitionRule +slug: Web/API/CSSViewTransitionRule +page-type: web-api-interface +browser-compat: api.CSSViewTransitionRule +--- + +{{APIRef("CSSOM")}} + +The **`CSSViewTransitionRule`** interface represents a CSS {{cssxref("@view-transition")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules). + +{{InheritanceDiagram}} + +## Instance properties + +_Inherits properties from its ancestor, {{domxref("CSSRule")}}._ + +- {{domxref("CSSViewTransitionRule.navigation", "navigation")}} {{readonlyinline}} + - : Returns the `@view-transition` at-rule's `navigation` descriptor value. +- {{domxref("CSSViewTransitionRule.types", "types")}} {{readonlyinline}} + - : Returns an array containing the `@view-transition` at-rule's `types` descriptor values. + +## Instance methods + +_Inherits methods from its ancestor, {{domxref("CSSRule")}}._ + +## Examples + +### Basic usage + +A stylesheet includes a {{cssxref("@view-transition")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules), with `navigation` and `types` descriptors set: + +```css +@view-transition { + navigation: auto; + types: slide, rotate; +} +``` + +In script, we grab a reference to the `@view-transition` at-rule using `document.styleSheets[0].cssRules`, then log the corresponding `CSSViewTransitionRule` object and its `navigation` and `types` properties to the console. The `types` property returns an array containing the values set for the `types` descriptor. + +```js +let myRule = document.styleSheets[0].cssRules; +console.log(myRule[0]); // a CSSViewTransitionRule representing the @view-transition at-rule +console.log(myRule[0].navigation); // "auto" +console.log(myRule[0].types); // ["slide", "rotate"] +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("@view-transition")}} +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/cssviewtransitionrule/navigation/index.md b/files/en-us/web/api/cssviewtransitionrule/navigation/index.md new file mode 100644 index 000000000000000..220f5d373571bfc --- /dev/null +++ b/files/en-us/web/api/cssviewtransitionrule/navigation/index.md @@ -0,0 +1,34 @@ +--- +title: "CSSViewTransitionRule: navigation property" +short-title: navigation +slug: Web/API/CSSViewTransitionRule/navigation +page-type: web-api-instance-property +browser-compat: api.CSSViewTransitionRule.navigation +--- + +{{APIRef("CSSOM")}} + +The **`navigation`** read-only property of the {{domxref("CSSViewTransitionRule")}} interface returns the associated {{cssxref("@view-transition")}} at-rule's `navigation` descriptor value. + +## Value + +A string. + +If no `navigation` descriptor is set on the `@view-transition` at-rule, the `navigation` property is equal to an empty string. + +## Examples + +See the main {{domxref("CSSViewTransitionRule")}} page for example usage. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("@view-transition")}} +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/cssviewtransitionrule/types/index.md b/files/en-us/web/api/cssviewtransitionrule/types/index.md new file mode 100644 index 000000000000000..6f4ff4d7e5c7a1d --- /dev/null +++ b/files/en-us/web/api/cssviewtransitionrule/types/index.md @@ -0,0 +1,34 @@ +--- +title: "CSSViewTransitionRule: types property" +short-title: types +slug: Web/API/CSSViewTransitionRule/types +page-type: web-api-instance-property +browser-compat: api.CSSViewTransitionRule.types +--- + +{{APIRef("CSSOM")}} + +The **`types`** read-only property of the {{domxref("CSSViewTransitionRule")}} interface returns an array containing the associated {{cssxref("@view-transition")}} at-rule's `types` descriptor values. + +## Value + +An array of strings. + +If no `types` descriptor is set on the `@view-transition` at-rule, the `types` property is equal to an empty array. + +## Examples + +See the main {{domxref("CSSViewTransitionRule")}} page for example usage. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("@view-transition")}} +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/document/startviewtransition/index.md b/files/en-us/web/api/document/startviewtransition/index.md index 454cdd33a9471c7..3329e3e1a1512df 100644 --- a/files/en-us/web/api/document/startviewtransition/index.md +++ b/files/en-us/web/api/document/startviewtransition/index.md @@ -29,7 +29,7 @@ startViewTransition(options) - `update` {{optional_inline}} - : The same `updateCallback` function described above. Defaults to `null`. - `types` {{optional_inline}} - - : An array of strings. These strings act as class names or identifiers for the transition, allowing you to selectively apply CSS styles or run different JavaScript logic based on the type of transition occurring. Defaults to an empty sequence. + - : An array of strings representing the types applied to the view transition. [View transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) enable selective application of CSS styles or JavaScript logic based on the type of transition occurring. Defaults to an empty sequence. ### Return value @@ -37,7 +37,9 @@ A {{domxref("ViewTransition")}} object instance. ## Examples -### Using a same-document view transition +See [View transition API > Examples](/en-US/docs/Web/API/View_Transition_API#examples) for a list of full examples. + +### Basic usage In this same-document view transition, we check if the browser supports view transitions. If there's no support, we set the background color using a fallback method which is applied immediately. @@ -114,4 +116,7 @@ Otherwise, the background color is set using a fallback method, without any anim - {{domxref("Document.activeViewTransition")}} - {{CSSXRef(":active-view-transition")}} pseudo-class - {{cssxref(":active-view-transition-type", ":active-view-transition-type()")}} pseudo-class +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) +- [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) - [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/view_transition_api/index.md b/files/en-us/web/api/view_transition_api/index.md index f574c00cc0220e4..18baa1e30249153 100644 --- a/files/en-us/web/api/view_transition_api/index.md +++ b/files/en-us/web/api/view_transition_api/index.md @@ -5,7 +5,9 @@ page-type: web-api-overview browser-compat: - api.Document.startViewTransition - css.at-rules.view-transition -spec-urls: https://drafts.csswg.org/css-view-transitions/ +spec-urls: + - https://drafts.csswg.org/css-view-transitions-2/ + - https://drafts.csswg.org/css-view-transitions/ --- {{DefaultAPISidebar("View Transition API")}} @@ -34,8 +36,12 @@ See [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Usin ## Interfaces +- {{domxref("CSSViewTransitionRule")}} + - : Represents a {{cssxref("@view-transition")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules). - {{domxref("ViewTransition")}} - : Represents a view transition, and provides functionality to react to the transition reaching different states (e.g., ready to run the animation, or animation finished) or skip the transition altogether. +- {{domxref("ViewTransitionTypeSet")}} + - : A [set-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis) representing the types of an active view transition, which enables the types to be queried or modified on-the-fly during a transition. ## Extensions to other interfaces @@ -74,7 +80,7 @@ See [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Usin - {{cssxref(":active-view-transition")}} - : Matches elements when a view transition is in progress. - {{cssxref(":active-view-transition-type()")}} - - : Matches elements when a view transition of a specific type is in progress. + - : Matches elements when a view transition with one or more specific types is in progress. ### Pseudo-elements diff --git a/files/en-us/web/api/view_transition_api/using_types/index.md b/files/en-us/web/api/view_transition_api/using_types/index.md new file mode 100644 index 000000000000000..2b93210eadc9c76 --- /dev/null +++ b/files/en-us/web/api/view_transition_api/using_types/index.md @@ -0,0 +1,285 @@ +--- +title: Using view transition types +slug: Web/API/View_Transition_API/Using_types +page-type: guide +--- + +{{DefaultAPISidebar("View Transition API")}} + +View transition types provide a mechanism by which different **types** can be specified for active view transitions. CSS can then be used to apply different animations to DOM elements when their content updates, depending on the transition type specified. For example, you might want to apply different animations to an {{htmlelement("img")}} element in an image gallery app as the displayed image changes depending on whether you are moving forward or backward in the sequence, deleting an image, or adding an image into the sequence. + +This article show how to use types along with same-document view transitions and cross-document view transitions. + +## Examples + +We'll demonstrate what you need to know about view transition types by walking through code contained in the following three examples: + +- [SPA transition types gallery](https://mdn.github.io/dom-examples/view-transitions/spa-gallery-transition-types/) ([source code](https://github.com/mdn/dom-examples/tree/main/view-transitions/spa-gallery-transition-types)): An SPA image gallery that uses transition types to apply different transition animations when the images are moved between using the prev button, next button, and by clicking directly on an image. +- [MPA transition types example](https://mdn.github.io/dom-examples/view-transitions/mpa-chapter-nav-transition-types/) ([source code](https://github.com/mdn/dom-examples/tree/main/view-transitions/mpa-chapter-nav-transition-types)): A story app with a chapter on each page. Demonstrates how to apply view transition animations across pages selectively with a transition type. +- [MPA multiple transition types example](https://mdn.github.io/dom-examples/view-transitions/mpa-chapter-nav-multiple-transition-types/) ([source code](https://github.com/mdn/dom-examples/tree/main/view-transitions/mpa-chapter-nav-multiple-transition-types)): Builds on the previous example by demonstrating how to apply different view transition animations across pages selectively with different transition types. The transition type is determined on-the-fly with JavaScript during the navigation. + +We won't explain how all the code works, just the bits relevant to view transition types. We've provided comments in the code to explain what each part is doing. + +## Using types with SPA view transitions + +To apply different types to SPA view transitions, we pass the type names into the {{domxref("Document.startViewTransition()")}} method call that kicks off the transition. The method can accept an object as a parameter containing an `update` callback function that handles the DOM updates you want to animate, and a `types` array containing strings representing the type names. + +Let's look at an example from our [SPA transition types gallery](https://mdn.github.io/dom-examples/view-transitions/spa-gallery-transition-types/): + +```js +document.startViewTransition({ + update: () => { + displayedImage.src = `${baseURL}${images[newId].filename}`; + displayedImage.alt = images[newId].alt; + displayedImage.setAttribute("data-id", newId); + caption.textContent = images[newId].alt; + }, + types: ["backwards"], +}); +``` + +When the "Previous" button is pressed, this code is run — the callback function updates the displayed image to display the previous image in the sequence (including updating its alt text, `data-id` representing the sequence number, and caption), and the `types` array specifies that the view transition should be run with a type of `backwards`. + +> [!NOTE] +> The types set on the view transition in the `types` array can be accessed via the {{domxref("ViewTransition.types", "types")}} property of the {{domxref("ViewTransition")}} object returned by the `startViewTransition()` method. The `types` property is a {{domxref("ViewTransitionTypeSet")}}. This is a [Set-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis), which means you can modify the types applied to a view transition on-the-fly using methods available on it such as `clear()`, `add()`, and `delete()`. + +### Applying custom animations in CSS + +Over in the CSS, we can customize styles for the active transition using the {{cssxref(":active-view-transition")}} and {{cssxref(":active-view-transition-type()")}} pseudo-classes. Respectively, these allow you to create selectors that match when any view transition is active, or only when a view transition with a certain type is active. + +First of all, we define a bunch of styles that are applied when a view transition is active, regardless of its type, selected using `:active-view-transition`. In this nested block, we apply a {{cssxref("view-transition-name")}} value of `none` to the document {{cssxref(":root")}} to turn view transitions off for most of the document. We then apply `view-transition-name` values of `image` and `caption` to the {{htmlelement("img")}} and {{htmlelement("figcaption")}} elements respectively, so changes to their DOM state are captured in separate snapshots and they can be animated independently. + +Finally, we use the {{cssxref("::view-transition-old()")}} and {{cssxref("::view-transition-new()")}} pseudo-elements to apply specific animations to the `caption` outgoing and incoming view. We want these animations to be applied to the `
` regardless of the specified type. + +```css +html:active-view-transition { + :root { + view-transition-name: none; + } + .displayed-img { + view-transition-name: image; + } + figcaption { + view-transition-name: caption; + } + + &::view-transition-old(caption) { + animation-name: fade-out; + } + &::view-transition-new(caption) { + animation-name: fade-in; + animation-delay: 0.6s; + } +} +``` + +The next stage is to apply different animations to the `image` outgoing and incoming views, depending on whether the `type` of the active view transition is `forwards` (the "Next" button was pressed), `backwards` (the "Previous" button was pressed), or `upwards` (a thumbnail image was clicked). This is done using three `:active-view-transition-type()` rulesets, each applying different {{cssxref("animation-name")}} values to the `::view-transition-old()` and `::view-transition-new()` pseudo-elements for each separate type: + +```css +html:active-view-transition-type(forwards) { + &::view-transition-old(image) { + animation-name: slide-out-to-left; + } + &::view-transition-new(image) { + animation-name: slide-in-from-right; + } +} + +html:active-view-transition-type(backwards) { + &::view-transition-old(image) { + animation-name: slide-out-to-right; + } + &::view-transition-new(image) { + animation-name: slide-in-from-left; + } +} + +html:active-view-transition-type(upwards) { + &::view-transition-old(image) { + animation-name: slide-out-to-top; + } + &::view-transition-new(image) { + animation-name: slide-in-from-top; + animation-delay: 0.6s; + } +} +``` + +In the case of the `::view-transition-new(image)` animation for the `upwards` type, we've also included an {{cssxref("animation-delay")}} value of `0.6s` to stop the new content sliding in from the top of the screen until the old content has finished sliding out. It looks strange if the two overlap, in this case. + +Further down the stylesheet, we set the {{cssxref("animation-duration")}} of all animations in all groups to `0.6s`, which explains why the delay set earlier was `0.6s`: + +```css +::view-transition-group(*) { + animation-duration: 0.6s; +} +``` + +> [!NOTE] +> For brevity, we've not shown all of the {{cssxref("@keyframes")}} definition code for the animations referenced above. You can find these in the [source code](https://github.com/mdn/dom-examples/tree/main/view-transitions/spa-gallery-transition-types). + +## Using types with cross-document view transitions via `@view-transition` + +To apply different types to cross-document view transitions, you can set them in the [`types`](/en-US/docs/Web/CSS/Reference/At-rules/@view-transition#types) descriptor of the {{cssxref("@view-transition")}} at-rule, which contains one or more types separated by commas. + +For example, in our [MPA transition types example](https://mdn.github.io/dom-examples/view-transitions/mpa-chapter-nav-transition-types/), the `@view-transition` at-rule in the shared stylesheet looks like this: + +```css +@view-transition { + navigation: auto; + types: slide; +} +``` + +Over in the CSS, we can customize the animations applied to the active view transition based on its type in the same way as we did in the SPA example: + +```css +html:active-view-transition-type(slide) { + :root { + view-transition-name: none; + } + section { + view-transition-name: chapter; + } + &::view-transition-old(chapter) { + animation-name: slide-out-to-left; + } + &::view-transition-new(chapter) { + animation-name: slide-in-from-right; + } +} +``` + +Here we apply several styles when the active view transition has a `type` of `slide` using the `:active-view-transition-type(slide)` selector. We apply a `view-transition-name` of `none` to the `:root` element to stop any snapshot capture, and then override it with a `view-transition-name` of `chapter` set on the page `
` element — this is the only part of the documents we want to apply a view transition to. + +Next, we use `::view-transition-old(chapter)` and `::view-transition-new(chapter)` to apply custom animations to the `
` as its content transitions between pages. + +## Applying different cross-document types using `pageswap` and `pagereveal` events + +The above works OK, but it's not ideal — when a new page is navigated to, the old page content always disappears to the left, and the new page content always appears from the right. This animation is fine when you are moving to a later chapter, but (at least, for users of left-to-right languages like English) it feels counter-intuitive when moving to an earlier chapter. For later-to-earlier chapter movements, it would be better to reverse the animation direction. + +To apply different types to the active view transition based on different navigation types, we need to manipulate the {{domxref("ViewTransition.types", "types")}} property of the corresponding `ViewTransition` object. This is available in the: + +- {{domxref("PageSwapEvent.viewTransition")}} event object property of the {{domxref("Window.pageswap_event", "pageswap")}} event in the case of the outgoing page. +- {{domxref("PageRevealEvent.viewTransition")}} event object property of the {{domxref("Window.pagereveal_event", "pagereveal")}} event in the case of the incoming page. + +The [MPA multiple transition types example](https://mdn.github.io/dom-examples/view-transitions/mpa-chapter-nav-multiple-transition-types/) demonstrates how to use this technique. This is similar to the previous example, but with some notable differences, which we'll explain below. + +### Determining the animation type via JavaScript + +Let's look at the shared JavaScript file. First of all, we define a custom function, `determineTransitionType()`, which looks at the URL of the outgoing page and incoming page and from those determines whether the navigation type is `backwards` (moving to an earlier chapter) or `forwards` (moving to a later chapter). + +The chapter pages are named sequentially (`index.html`, then `index2.html`, `index3.html`, etc.), therefore, we compare the number contained in the filenames to see whether the navigation is `backwards` (outgoing page number is higher than incoming page number) or forwards (outgoing page number is lower than incoming page number). + +The code you use to determine the type to apply will depend on your project. You can find detailed comments explaining how the below code works in our [source code](https://github.com/mdn/dom-examples/tree/main/view-transitions/mpa-chapter-nav-multiple-transition-types). + +```js +const determineTransitionType = (oldNavigationEntry, newNavigationEntry) => { + const currentURL = oldNavigationEntry.url; + const destinationURL = newNavigationEntry.url; + + function determinePageIndex(url) { + const array = url.split("/"); + const slug = array[array.length - 1]; + if (slug.indexOf("html") === -1) { + return 0; + } else { + const pageIndex = slug.replace("index", "").replace(".html", ""); + if (pageIndex === "") { + return 0; + } else { + return parseInt(pageIndex); + } + } + } + + const currentPageIndex = determinePageIndex(currentURL); + const destinationPageIndex = determinePageIndex(destinationURL); + + if (currentPageIndex > destinationPageIndex) { + return "backwards"; + } else if (currentPageIndex < destinationPageIndex) { + return "forwards"; + } +}; +``` + +Next, we use a {{domxref("Window.pageswap_event", "pageswap")}} event listener to set the transition type for the outgoing page. Inside the event handler function, we grab the old and new navigation entries from the event object's {{domxref("PageSwapEvent.activation", "activation")}} property, pass these to the `determineTransitionType()` function to determine the type, then assign the type to the view transition using the {{domxref("ViewTransition.types")}} property's `add()` method. + +```js +window.addEventListener("pageswap", async (e) => { + const transitionType = determineTransitionType( + e.activation.from, + e.activation.entry, + ); + + console.log(`pageSwap: ${transitionType}`); + e.viewTransition.types.add(transitionType); +}); +``` + +Finally, we use a {{domxref("Window.pagereveal_event", "pagereveal")}} event listener to set the transition type for the incoming page. Inside the event handler function, we grab the old and new navigation entries from the {{domxref("Navigation.activation")}} property and pass these to the `determineTransitionType()` function to determine the type. We assign the type to the view transition using the {{domxref("ViewTransition.types")}} property's `add()` method, unless the type is `undefined`, in which case we skip that step. + +```js +window.addEventListener("pagereveal", async (e) => { + const transitionType = determineTransitionType( + navigation.activation.from, + navigation.activation.entry, + ); + + console.log(`pageReveal: ${transitionType}`); + if (transitionType !== undefined) { + e.viewTransition.types.add(transitionType); + } +}); +``` + +> [!NOTE] +> The `determineTransitionType()` function can return `undefined` if neither the `backwards` or `forwards` conditions are true. This can occur if the user reloads the page, in which case the current page and destination page are the same page, therefore the index values are the same. + +### Applying custom animations in CSS + +Now we've got an appropriate type set on the active view transition depending on the navigation type, we can set different animations for each type in our CSS, in the same way as we saw in previous examples: + +```css +html:active-view-transition { + nav { + view-transition-name: none; + } + section { + view-transition-name: chapter; + } +} + +html:active-view-transition-type(forwards) { + &::view-transition-old(chapter) { + animation-name: slide-out-to-left; + } + &::view-transition-new(chapter) { + animation-name: slide-in-from-right; + } +} + +html:active-view-transition-type(backwards) { + &::view-transition-old(chapter) { + animation-name: slide-out-to-right; + } + &::view-transition-new(chapter) { + animation-name: slide-in-from-left; + } +} +``` + +Note also that we have removed the `types` descriptor from the `@view-transition` at-rule in the shared CSS. We need the `navigation` descriptor to enable cross-document view transitions, but we are handling types in our JavaScript, so we don't need to set them here. + +```css +@view-transition { + navigation: auto; +} +``` + +## See also + +- [View transition API](/en-US/docs/Web/API/View_Transition_API) +- [Handle multiple view transition styles with view transition types (SPA)](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) on developer.chrome.com (2024) +- [View transition types in cross-document view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/cross-document#view-transition-types) on developer.chrome.com (2024) diff --git a/files/en-us/web/api/viewtransition/index.md b/files/en-us/web/api/viewtransition/index.md index a8573654ab8c5bf..b04f52d0cd5c929 100644 --- a/files/en-us/web/api/viewtransition/index.md +++ b/files/en-us/web/api/viewtransition/index.md @@ -25,6 +25,8 @@ When a view transition is triggered by a `startViewTransition()` call (or a page - : A {{jsxref("Promise")}} that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user. - {{domxref("ViewTransition.ready")}} {{ReadOnlyInline}} - : A {{jsxref("Promise")}} that fulfills once the pseudo-element tree is created and the transition animation is about to start. +- {{domxref("ViewTransition.types")}} {{ReadOnlyInline}} + - : A {{domxref("ViewTransitionTypeSet")}} that allows the types set on the view transition to be accessed and modified. - {{domxref("ViewTransition.updateCallbackDone")}} {{ReadOnlyInline}} - : A {{jsxref("Promise")}} that fulfills when the promise returned by the {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method's callback fulfills. @@ -109,4 +111,7 @@ This animation also requires the following CSS, to turn off the default CSS anim ## See also +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) +- [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) - [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/viewtransition/types/index.md b/files/en-us/web/api/viewtransition/types/index.md new file mode 100644 index 000000000000000..16bf6570a15ac53 --- /dev/null +++ b/files/en-us/web/api/viewtransition/types/index.md @@ -0,0 +1,216 @@ +--- +title: "ViewTransition: types property" +short-title: types +slug: Web/API/ViewTransition/types +page-type: web-api-instance-property +browser-compat: api.ViewTransition.types +--- + +{{APIRef("View Transition API")}} + +The **`types`** read-only property of the +{{domxref("ViewTransition")}} interface is a {{domxref("ViewTransitionTypeSet")}} that allows the [types](/en-US/docs/Web/API/View_Transition_API/Using_types) set on the view transition to be accessed and modified. + +## Value + +A {{domxref("ViewTransitionTypeSet")}}. This is a [Set-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis), which means you can modify the types applied to a view transition on-the-fly using methods available on it such as `clear()`, `add()`, and `delete()`. + +## Examples + +### Basic usage + +This example includes a basic document that transitions between two different pieces of content. We provide three buttons, each of which triggers the transition, but with a different `type` to apply a different kind of animation to the transition. + +#### HTML + +The markup includes a single {{htmlelement("p")}} element to contain the content and three {{htmlelement("button")}} elements to trigger the view transition. + +```html live-sample___basic_usage +

This is my first piece of content. I hope you like it!

+
+ + + +
+``` + +#### JavaScript + +In our script, we create references to the buttons and the content paragraph, and then store our two different pieces of content in two constants. + +```js live-sample___basic_usage +const defaultBtn = document.getElementById("default"); +const slideBtn = document.getElementById("slide"); +const flipBtn = document.getElementById("flip"); +const content = document.querySelector("p"); + +const first = "This is my first piece of content. I hope you like it!"; +const second = + "This is my second piece of content. Is it better than the first?"; +``` + +Next, we add `click` event listeners to the buttons; when they are clicked, the `changeContent()` function is run. + +```js live-sample___basic_usage +defaultBtn.addEventListener("click", changeContent); +slideBtn.addEventListener("click", changeContent); +flipBtn.addEventListener("click", changeContent); +``` + +Finally, we define the `changeContent()` function. We start by invoking the {{domxref("Document.startViewTransition", "startViewTransition()")}} method to update the content and start the transition, saving the returned `ViewTransition` object in the `vt` constant. Inside `startViewTransition()`, the `update` callback checks whether the paragraph `textContent` is equal to the `first` string. If so, we set it to the `second` string. If not, we set it to the `first` string. + +In the second part of the `changeContent()` function, we check the value of the `click` event target: + +- If it is the "Slide" button, we add a `slide` type to the active view transition's types using `vt.types.add("slide")`. +- If it is the "Flip" button, we add a `flip` type to the active view transition's types using `vt.types.add("flip")`. +- We don't do anything if the "Default" button was pressed. In this case, we want to use the default view transition cross-fade animation. + +```js live-sample___basic_usage +function changeContent(e) { + const vt = document.startViewTransition({ + update: () => { + content.textContent === first + ? (content.textContent = second) + : (content.textContent = first); + }, + }); + + if (e.target === slideBtn) { + vt.types.add("slide"); + } else if (e.target === flipBtn) { + vt.types.add("flip"); + } +} +``` + +#### CSS + +In our styles, we start off by creating a set of nested rules using the `:active-view-transition` pseudo-class. These styles will be applied whenever a view transition is active, regardless of the their types. We apply a {{cssxref("view-transition-name")}} of `none` to the {{cssxref(":root")}}, as we don't want any elements captured and animated on transition except for the `

` element, which is given a `view-transition-name` of `content`. + +```css hidden live-sample___basic_usage +html, +body { + height: 100%; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +div { + display: flex; + width: 60%; + justify-content: space-between; +} + +p { + font-size: 1.7em; + width: 60%; + color: blue; + background-color: white; + margin-top: 0; +} +``` + +```css live-sample___basic_usage +html:active-view-transition { + :root { + view-transition-name: none; + } + p { + view-transition-name: content; + } +} +``` + +Next, we use the `:active-view-transition-type()` pseudo-class to create two blocks of nested styles, the first of which is only applied when the active view transition has a type of `slide`, and the second of which is only applied when the active view transition has a type of `flip`. In each block, we use the {{cssxref("::view-transition-old()")}} and {{cssxref("::view-transition-new()")}} pseudo-elements to apply custom {{cssxref("animation-name")}} values to the `slide` capture group's outgoing and incoming views. + +As a result: + +- When the transition type is `slide`, the old content view slides out to the left, and the new content view slides in from the right. +- When the transition type is `flip`, the old content view rotates horizontally to 90 degrees so it is no longer visible, and the new content view rotates back in. +- In any other case, the default cross-fade transition animations are used. + +```css live-sample___basic_usage +html:active-view-transition-type(slide) { + &::view-transition-old(content) { + animation-name: slide-out-to-left; + } + &::view-transition-new(content) { + animation-name: slide-in-from-right; + } +} + +html:active-view-transition-type(flip) { + &::view-transition-old(content) { + animation-name: flip-out; + } + &::view-transition-new(content) { + animation-name: flip-in; + animation-delay: 0.6s; + } +} +``` + +Finally, we use {{cssxref("@keyframes")}} animation blocks to define the animations referenced previously. We also set a custom {{cssxref("animation-duration")}} on all capture groups, to slow the transition animations down slightly. + +```css live-sample___basic_usage +@keyframes slide-out-to-left { + to { + translate: -100vw 0; + } +} +@keyframes slide-in-from-right { + from { + translate: 100vw 0; + } +} + +@keyframes flip-out { + to { + rotate: x 90deg; + } +} +@keyframes flip-in { + from { + rotate: x -90deg; + } +} + +::view-transition-group(*) { + animation-duration: 0.6s; +} +``` + +#### Result + +The example is rendered like so: + +{{EmbedLiveSample("basic-usage", "100%", 200)}} + +Try clicking each button and note how the DOM changes are identical in each case, but the animation is different. This is because a different transition type is set depending on which button is pressed (or no transition type in the "Default" case). + +### Applied example + +Check out our [MPA multiple transition types example](https://mdn.github.io/dom-examples/view-transitions/mpa-chapter-nav-multiple-transition-types/) ([source code](https://github.com/mdn/dom-examples/tree/main/view-transitions/mpa-chapter-nav-multiple-transition-types)), which demonstrates how to apply different animations to cross-document view transitions depending on the navigation type, represented by different transition types. The transition type is determined on-the-fly with JavaScript during the navigation. + +[Applying different cross-document types using pageswap and pagereveal events](/en-US/docs/Web/API/View_Transition_API/Using_types#applying_different_cross-document_types_using_pageswap_and_pagereveal_events) provides a walkthrough of this example. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("ViewTransitionTypeSet")}} +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) +- [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/viewtransitiontypeset/index.md b/files/en-us/web/api/viewtransitiontypeset/index.md new file mode 100644 index 000000000000000..68d1f1aeeb39b63 --- /dev/null +++ b/files/en-us/web/api/viewtransitiontypeset/index.md @@ -0,0 +1,78 @@ +--- +title: ViewTransitionTypeSet +slug: Web/API/ViewTransitionTypeSet +page-type: web-api-interface +browser-compat: api.ViewTransitionTypeSet +--- + +{{APIRef("View Transition API")}} + +The **`ViewTransitionTypeSet`** interface of the {{domxref("View Transition API", "View Transition API", "", "nocode")}} is a [set-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis) representing the types of an active view transition. This enables the types to be queried or modified on-the-fly during a transition. + +The `ViewTransitionTypeSet` object can be accessed via the {{domxref("ViewTransition.types")}} property. + +The property and method links below link to the JavaScript {{jsxref("Set")}} object documentation. + +## Instance properties + +- {{jsxref("Set.prototype.size")}} + - : Returns the number of values in the set. + +## Instance methods + +- {{jsxref("Set.prototype.add")}} + - : Inserts the specified value into this set, if it is not already present. +- {{jsxref("Set.prototype.clear()")}} + - : Removes all values form the set. +- {{jsxref("Set.prototype.delete()")}} + - : Removes the specified value from this set, if it is in the set. +- {{jsxref("Set.prototype.entries()")}} + - : Returns a new iterator object that contains **an array of `[value, value]`** for each element in the set, in insertion order. +- {{jsxref("Set.prototype.forEach()")}} + - : Calls a callback function once for each value present in the set, in insertion order. +- {{jsxref("Set.prototype.has()")}} + - : Returns a boolean indicating whether the specified value exists in the set. +- {{jsxref("Set.prototype.keys()")}} + - : An alias for {{jsxref("Set.prototype.values()")}}. +- {{jsxref("Set.prototype.values()")}} + - : Returns a new iterator object that yields the **values** for each element in the set, in insertion order. +- [`Set.prototype[Symbol.iterator]()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Symbol.iterator) + - : Returns a new iterator object that yields the **values** for each element in the set, in insertion order. + +## Examples + +```js +// Start a view transition +const vt = document.startViewTransition({ + update: updateTheDOMSomehow, + types: ["slideLeft", "fadeOut", "flipVertical"], +}); + +// Add another type +vt.types.add("flipHorizontal"); + +// Delete a type +vt.types.delete("flipVertical"); + +// Return the number of types in the set +console.log(vt.types.size); + +// Log each type to the console +vt.types.forEach((type) => console.log(type)); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("ViewTransition.types")}} +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) +- [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/css/reference/at-rules/@view-transition/index.md b/files/en-us/web/css/reference/at-rules/@view-transition/index.md index 34e51fc462d4cf2..965acbc16f6b75d 100644 --- a/files/en-us/web/css/reference/at-rules/@view-transition/index.md +++ b/files/en-us/web/css/reference/at-rules/@view-transition/index.md @@ -8,23 +8,32 @@ sidebar: cssref The **`@view-transition`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules) is used to opt in the current and destination documents to undergo a [view transition](/en-US/docs/Web/API/View_Transition_API), in the case of a cross-document navigation. -For a cross-document view transition to work, the current and destination documents of the navigation also need to be on the same origin. +For a cross-document view transition to work, the current and destination documents of the navigation need to be on the same origin. ## Syntax ```css @view-transition { - navigation: auto; + navigation: auto | none; + types: none | #; } ``` ### Descriptors - `navigation` - - : Specifies the effect this at-rule will have on the document's view transition behavior. Possible values are: - - `auto`: The document will undergo a view transition when taking part in a navigation, provided the navigation is same-origin, without cross-origin redirects, and its {{domxref("NavigateEvent.navigationType", "navigationType")}} is `traverse`, `push`, or `replace`. In the case of `push` or `replace`, the navigation must be initiated by a user interacting with the page content, not by a browser UI feature. - - - `none`: The document will not undergo a view transition. + - : A keyword specifying the effect this at-rule will have on the document's view transition behavior. Possible values are: + - `auto` + - : The document will undergo a view transition when taking part in a navigation, provided the navigation is [same-origin](/en-US/docs/Web/Security/Defenses/Same-origin_policy), without cross-origin redirects, and its {{domxref("NavigateEvent.navigationType", "navigationType")}} is `traverse`, `push`, or `replace`. In the case of `push` or `replace`, the navigation must be initiated by a user interacting with the page content, not by a browser UI feature. + - `none` + - : The document will not undergo a view transition. + +- `types` + - : Specifies the view transition [types](/en-US/docs/Web/API/View_Transition_API/Using_types) to set on the active view transition for the current and destination documents. Possible values are: + - `#` + - : One or more comma-separated {{cssxref("<custom-ident>")}} values representing the types to set. + - `none` + - : No types are set. ## Formal syntax @@ -82,6 +91,19 @@ In addition to the `@view-transition` at-rule, we use the {{cssxref("@keyframes" See this [transitions multi-page app](https://mdn.github.io/dom-examples/view-transitions/mpa/) demo live. +### Using view transition types + +Our [MPA transition types example](https://mdn.github.io/dom-examples/view-transitions/mpa-chapter-nav-transition-types/) ([source code](https://github.com/mdn/dom-examples/tree/main/view-transitions/mpa-chapter-nav-transition-types)) demonstrates how to use `types` via `@view-transition`: + +```css +@view-transition { + navigation: auto; + types: slide; +} +``` + +See [Using types with cross-document view transitions via `@view-transition`](/en-US/docs/Web/API/View_Transition_API/Using_types#using_types_with_cross-document_view_transitions_via_view-transition) for a walkthrough of the referenced example. + ## Specifications {{Specifications}} @@ -98,5 +120,6 @@ See this [transitions multi-page app](https://mdn.github.io/dom-examples/view-tr - {{cssxref("::view-transition-group()")}} - {{cssxref("::view-transition-image-pair()")}} - [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) - [CSS at-rules](/en-US/docs/Web/CSS/Guides/Syntax/At-rules) - [CSS at-rule functions](/en-US/docs/Web/CSS/Reference/At-rules/At-rule_functions) diff --git a/files/en-us/web/css/reference/properties/background-repeat/index.md b/files/en-us/web/css/reference/properties/background-repeat/index.md index 7aa1d86cff67e28..88d8f5650f1f955 100644 --- a/files/en-us/web/css/reference/properties/background-repeat/index.md +++ b/files/en-us/web/css/reference/properties/background-repeat/index.md @@ -230,5 +230,5 @@ In this example, each list item is matched with a different value of `background - The other {{cssxref("background")}} shorthand components: {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}} ({{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}), and {{cssxref("background-size")}} - [Using multiple backgrounds](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds) -- [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds) module +- [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module - [Understanding aspect ratios](/en-US/docs/Web/CSS/Guides/Box_sizing/Aspect_ratios) diff --git a/files/en-us/web/css/reference/selectors/_colon_active-view-transition-type/index.md b/files/en-us/web/css/reference/selectors/_colon_active-view-transition-type/index.md new file mode 100644 index 000000000000000..0af60d71bc811fc --- /dev/null +++ b/files/en-us/web/css/reference/selectors/_colon_active-view-transition-type/index.md @@ -0,0 +1,241 @@ +--- +title: :active-view-transition-type() +slug: Web/CSS/Reference/Selectors/:active-view-transition-type +page-type: css-pseudo-class +browser-compat: css.selectors.active-view-transition-type +sidebar: cssref +--- + +The functional **`:active-view-transition-type()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) matches elements when a view transition with one or more specific types is in progress (is _active_) and stops matching once the view transition has completed. + +```css +html:active-view-transition-type(forwards, backwards) { + /* ... */ +} +``` + +## Syntax + +```css-nolint +:active-view-transition-type(#) { + /* ... */ +} +``` + +### Parameters + +- `#` + - : One or more comma-separated {{cssxref("<custom-ident>")}} values representing the choice of types that can be applied to the active view transition for this selector to match. + +## Description + +[View transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) provide a mechanism by which different **types** can be specified for active view transitions. Types can be set on view transitions in multiple ways: + +- For same-document (SPA) view transitions, specify types in the [`types`](/en-US/docs/Web/API/Document/startViewTransition#types) option of the {{domxref("Document.startViewTransition", "startViewTransition()")}} method. +- For cross-document view transitions, specify types in the [`types`](/en-US/docs/Web/CSS/Reference/At-rules/@view-transition#types) descriptor of the {{cssxref("@view-transition")}} at-rule. +- You can also modify the active view transition's types on-the-fly via the {{domxref("ViewTransition.types", "types")}} property of the corresponding `ViewTransition` object: + - For same-document view transitions, this is the `ViewTransition` object returned by the `startViewTransition()` method. + - For cross-document view transitions, the `ViewTransition` object is available in the {{domxref("PageSwapEvent.viewTransition", "viewTransition")}} property of the {{domxref("Window.pageswap_event", "pageswap")}} event object in the case of the outgoing page, and the {{domxref("PageRevealEvent.viewTransition", "viewTransition")}} property of the {{domxref("Window.pagereveal_event", "pagereveal")}} event object in the case of the incoming page. + - You can also access the active `ViewTransition` via the {{domxref("Document.activeViewTransition")}} property. This provides a consistent way to access the active view transition in any context. + +Once the active view transition has one or more types set on it, the `:active-view-transition-type()` pseudo-class can be applied to the document root element to set custom styles for each type. The pseudo-class takes a comma-separated list of types as its argument to specify the types that can be set on the active view transition for the selector to be matched. + +For example, you might want to apply different transition animations to an {{htmlelement("img")}} element in an image gallery app as the displayed image changes, depending on whether you are moving forward or backward in the sequence, deleting an image, or adding an image into the sequence. + +### OR versus AND behavior + +It is important to note that the comma-separated list of types specified inside the `:active-view-transition-type()` pseudo-class provides OR behavior — if one or more of these types are set on the active view transition, the selector will match. + +For example, in this case, the selector will match if the active view transition has a type of `forwards`, `backwards`, or both: + +```css +html:active-view-transition-type(forwards, backwards) { + /* ... */ +} +``` + +If you want to specify AND behavior — that is, all the types must be set for the selector to match — you can do so by chaining multiple `:active-view-transition-type()` pseudo-classes together. In the following case, the selector will only match if the active view transition has types of `slide` _and_ `forwards`: + +```css +html:active-view-transition-type(slide):active-view-transition-type(forwards) { + /* ... */ +} +``` + +## Examples + +See also [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) for multiple complete examples. + +### Basic `:active-view-transition-type()` usage + +This example includes a basic document that transitions between two different pieces of content via two different buttons, "Backwards" and "Forwards". We demonstrate how view transition types can be used to animate the transition differently depending on which button was pressed. + +#### HTML + +The markup includes a single {{htmlelement("p")}} element to contain the content and two {{htmlelement("button")}} elements to trigger the view transitions. + +```html live-sample___basic_usage +

This is my first piece of content. I hope you like it!

+
+ + +
+``` + +#### JavaScript + +In our script, we create references to both buttons and the content paragraph, and then store our two different pieces of content in two constants. + +```js live-sample___basic_usage +const backBtn = document.getElementById("backwards"); +const fwdBtn = document.getElementById("forwards"); +const content = document.querySelector("p"); + +const first = "This is my first piece of content. I hope you like it!"; +const second = + "This is my second piece of content. Is it better than the first?"; +``` + +Next, we add `click` event listeners to the backwards and forwards buttons; when they are clicked, the `changeContent()` function is run. + +```js live-sample___basic_usage +backBtn.addEventListener("click", changeContent); +fwdBtn.addEventListener("click", changeContent); +``` + +Finally, we define the `changeContent()` function. We start by declaring a `type` value that will hold our view transition type value. If the event target is the "Backwards" button, we set `type` to `backwards`. If not, we set `type` to `forwards`. We then invoke the {{domxref("Document.startViewTransition", "startViewTransition()")}} method to update the content and start the transition: + +- The `update` callback checks whether the paragraph `textContent` is equal to the `first` string. If so, we set it to the `second` string. If not, we set it to the `first` string. +- The `types` array is given one element: the `type` value we declared earlier. + +```js live-sample___basic_usage +function changeContent(e) { + const type = e.target === backBtn ? "backwards" : "forwards"; + document.startViewTransition({ + update: () => { + content.textContent === first + ? (content.textContent = second) + : (content.textContent = first); + }, + types: [type], + }); +} +``` + +#### CSS + +In our styles, we start off by creating a set of nested rules using the `:active-view-transition` pseudo-class. These styles will be applied whenever a view transition is active, regardless of the their types. We apply a {{cssxref("view-transition-name")}} of `none` to the {{cssxref(":root")}}, as we don't want any elements captured and animated on transition except for the `

` element, which is given a `view-transition-name` of `slide`. + +```css hidden live-sample___basic_usage +html, +body { + height: 100%; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +div { + display: flex; + width: 60%; + justify-content: space-between; +} + +p { + font-size: 1.7em; + width: 60%; + color: blue; + margin-top: 0; +} +``` + +```css live-sample___basic_usage +html:active-view-transition { + :root { + view-transition-name: none; + } + p { + view-transition-name: slide; + } +} +``` + +Next, we use the `:active-view-transition-type()` pseudo-class to create two blocks of nested styles, the first of which is only applied when the active view transition has a type of `forwards`, and the second of which is only applied when the active view transition has a type of `backwards`. In each block, we use the {{cssxref("::view-transition-old()")}} and {{cssxref("::view-transition-new()")}} pseudo-elements to apply custom {{cssxref("animation-name")}} values to the `slide` capture group's outgoing and incoming views. + +As a result: + +- When the transition type is `forwards`, the old content view slides out to the left, and the new content view slides in from the right. +- When the transition type is `backwards`, the old content view slides out to the right, and the new content view slides in from the left. + +```css live-sample___basic_usage +html:active-view-transition-type(forwards) { + &::view-transition-old(slide) { + animation-name: slide-out-to-left; + } + &::view-transition-new(slide) { + animation-name: slide-in-from-right; + } +} + +html:active-view-transition-type(backwards) { + &::view-transition-old(slide) { + animation-name: slide-out-to-right; + } + &::view-transition-new(slide) { + animation-name: slide-in-from-left; + } +} +``` + +Finally, we use {{cssxref("@keyframes")}} animation blocks to define the animations referenced previously. + +```css live-sample___basic_usage +@keyframes slide-in-from-left { + from { + translate: -100vw 0; + } +} +@keyframes slide-in-from-right { + from { + translate: 100vw 0; + } +} +@keyframes slide-out-to-left { + to { + translate: -100vw 0; + } +} +@keyframes slide-out-to-right { + to { + translate: 100vw 0; + } +} +``` + +#### Result + +The example is rendered like so: + +{{EmbedLiveSample("basic-usage", "100%", 200)}} + +Try clicking the "Backwards" and "Forwards" buttons, and note how, even though the same code is used to trigger the content update and view transition in each case, a different animation is used for the transition. This is because a different transition type is set depending on which button is pressed. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Document.activeViewTransition")}} +- {{CSSXRef(":active-view-transition")}} pseudo-class +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) +- [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) diff --git a/files/en-us/web/css/reference/selectors/_colon_active-view-transition/index.md b/files/en-us/web/css/reference/selectors/_colon_active-view-transition/index.md index 9e1ec415b424176..a0a6f1c1fa9c396 100644 --- a/files/en-us/web/css/reference/selectors/_colon_active-view-transition/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_active-view-transition/index.md @@ -20,7 +20,7 @@ The **`:active-view-transition`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en- ### Styling an active view transition -This example extends on the [same-document view transition](/en-US/docs/Web/API/Document/startViewTransition#using_a_same-document_view_transition) example on the `startViewTransition` page. +This example extends the [Basic view transition example](/en-US/docs/Web/API/Document/startViewTransition#basic_example) on the `startViewTransition` page. ```html

@@ -104,4 +104,8 @@ changeColorButton.addEventListener("keypress", changeColor); ## See also - {{CSSXRef(":active-view-transition-type", ":active-view-transition-type()")}} pseudo-class -- [`startViewTransition`](/en-US/docs/Web/API/Document/startViewTransition) method +- [`startViewTransition()`](/en-US/docs/Web/API/Document/startViewTransition) method +- {{domxref("Document.activeViewTransition")}} +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) +- [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) diff --git a/files/en-us/web/css/reference/selectors/_colon_scope/index.md b/files/en-us/web/css/reference/selectors/_colon_scope/index.md index 55be13648d07b26..3abd74787bb627b 100644 --- a/files/en-us/web/css/reference/selectors/_colon_scope/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_scope/index.md @@ -84,13 +84,13 @@ div { } a { - color: darkmagenta; + color: indigo; } } @scope (.dark-scheme) { :scope { - background-color: darkmagenta; + background-color: indigo; color: antiquewhite; } diff --git a/files/en-us/web/css/reference/values/atan2/index.md b/files/en-us/web/css/reference/values/atan2/index.md index bdb5497e8e72111..215d12a8fbc235a 100644 --- a/files/en-us/web/css/reference/values/atan2/index.md +++ b/files/en-us/web/css/reference/values/atan2/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.atan2 sidebar: cssref --- -The **`atan2()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the inverse tangent of two values between `-infinity` and `infinity`. The function accepts two arguments and returns the number of radians representing an {{cssxref("<angle>")}} between `-180deg` and `180deg`. +The **`atan2()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the inverse tangent of two values between `-infinity` and `infinity`. The function accepts two arguments and returns an {{cssxref("angle")}} between `-180deg` and `180deg`, without implying any specific unit such as radians. ## Syntax @@ -36,7 +36,7 @@ The `atan2(y, x)` function accepts two comma-separated values as its parameters. ### Return value -Given two values `x` and `y`, the function `atan2(y, x)` calculates and returns the {{cssxref("<angle>")}} between the positive x-axis and the ray from the origin to the point `(x, y)`. +Given two values `x` and `y`, the function `atan2(y, x)` calculates and returns the {{cssxref("angle")}} between the positive x-axis and the ray from the origin to the point `(x, y)`. ## Formal syntax @@ -46,7 +46,7 @@ Given two values `x` and `y`, the function `atan2(y, x)` calculates and returns ### Rotate elements -The `atan2()` function can be used to {{cssxref("transform-function/rotate", "rotate")}} elements as it return an {{cssxref("<angle>")}}. +The `atan2()` function can be used to {{cssxref("transform-function/rotate", "rotate")}} elements as it return an {{cssxref("angle")}} . #### HTML diff --git a/files/en-us/web/http/guides/mime_types/index.md b/files/en-us/web/http/guides/mime_types/index.md index 9715883f3720506..933b9e66119a399 100644 --- a/files/en-us/web/http/guides/mime_types/index.md +++ b/files/en-us/web/http/guides/mime_types/index.md @@ -149,9 +149,9 @@ All HTML content should be served with this type. Alternative MIME types for XHT JavaScript content should always be served with the MIME type `text/javascript`. For historic reasons, browsers may support some [legacy JavaScript types](#legacy_javascript_mime_types) listed below, but you should not assume scripts served with any MIME type other than `text/javascript` will always load or run. -Note that in HTML the [`type`](/en-US/docs/Web/HTML/Reference/Elements/script/type) attribute for {{htmlelement("script")}} elements may only contain the **JavaScript MIME type essence**: `text/javascript`. -Including any parameter, such as `charset=utf-8`, is the same as setting the `type` to any other MIME type: the script content is treated as a data block and is not executed as JavaScript. -(Note that setting the `type` to a JavaScript MIME type is a deprecated feature itself: you should omit the `type` in this case.) +Note that in HTML the [`type`](/en-US/docs/Web/HTML/Reference/Elements/script/type) attribute for {{htmlelement("script")}} elements may only contain the **JavaScript MIME type essence**: `text/javascript` or one of the keywords `module` (for ES modules) or `importmap`. +Including any parameter in the `type` attribute, such as `charset=utf-8`, is the same as setting the `type` to [an unrecognized value](/en-US/docs/Web/HTML/Reference/Elements/script/type#any_other_value): the script content is treated as a data block and is not executed as JavaScript. +Note that setting `type="text/javascript"` is no longer necessary; this is the default for `