Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#45786] - [6.0] Cassiopeia - Add view-transition for pages

NPM Resource Changed PR-6.0-dev Pending

User tests: Successful: Unsuccessful:

avatar hans2103
hans2103
25 Jul 2025

Pull Request for no Issue .

Summary of Changes

Adding @view-transition for smoother navigation between pages.

@view-transition provides a mechanism for easily creating animated transitions between different DOM states, while also updating the DOM contents in a single step. This API is specific to cross-document transitions.
source: https://caniuse.com/?search=%40view-transition

example by Adam Argyle https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#view-transitions-for-page-navigation

not supported by Firefox yet.
no reason not to merge this.. transition between pages on Firefox will not benefit this feature and stay as is right now

Testing Instructions

  • apply PR
  • build css files from command line
  • npm run build:css
  • visit pages using Chrome, Edge or Safari

Actual result BEFORE applying this Pull Request

Screen.Recording.2025-07-25.at.22.06.45.mov

Expected result AFTER applying this Pull Request

a smooth transition between pages.

Screen.Recording.2025-07-25.at.22.07.39.mov

Link to documentations

Please select:

  • Documentation link for docs.joomla.org:

  • No documentation changes for docs.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

avatar hans2103 hans2103 - open - 25 Jul 2025
avatar hans2103 hans2103 - change - 25 Jul 2025
Status New ⇒ Pending
avatar joomla-cms-bot joomla-cms-bot - change - 25 Jul 2025
Category ⇒ Repository NPM Change
avatar hans2103
hans2103 - comment - 25 Jul 2025 
> joomla@6.0.0 lint:css
> stylelint --config build/.stylelintrc.json "administrator/components/com_media/resources/**/*.scss" "administrator/templates/**/*.scss" "build/media_source/**/*.scss" "build/media_source/**/*.css" "templates/**/*.scss" "installation/template/**/*.scss"


build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss
 3:3  ✖  Unexpected unknown property "navigation"  property-no-unknown
 8:5  ✖  Unexpected unknown property "navigation"  property-no-unknown

2 problems (2 errors, 0 warnings)

Currently used stylelint is out of date. Since 16.13.0 'navigation' is a known property

avatar brianteeman
brianteeman - comment - 25 Jul 2025

You can combine the css

@media screen and (prefers-reduced-motion: no-preference) {
   @view-transition {
       navigation: auto;
   }
}
avatar hans2103 hans2103 - change - 26 Jul 2025
Labels Added: NPM Resource Changed PR-6.0-dev
avatar richard67
richard67 - comment - 27 Jul 2025

@hans2103 The stylelint update to 16.22.0 will be made with PR #45784 . If we don't want to break the SCSS lint in the 5.4-dev branch for a while, your PR here and the other one should not be merged before mine.

avatar JeroenMoolenschot JeroenMoolenschot - test_item - 29 Jul 2025 - Tested successfully
avatar JeroenMoolenschot
JeroenMoolenschot - comment - 29 Jul 2025

I have tested this item ✅ successfully on 3f500df

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45786.

avatar RickR2H RickR2H - test_item - 30 Jul 2025 - Tested successfully
avatar RickR2H
RickR2H - comment - 30 Jul 2025

I have tested this item ✅ successfully on 3f500df

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45786.

avatar RickR2H RickR2H - change - 30 Jul 2025
Status Pending ⇒ Ready to Commit
avatar RickR2H
RickR2H - comment - 30 Jul 2025

RTC
Implementation is open for discussion and up to the Release managers

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45786.

Add a Comment

Login with GitHub to post a comment