transition

Author: btopro

elements/clean-portfolio-theme/clean-portfolio-theme.js

@@ -44,7 +44,6 @@ export class CleanPortfolioTheme extends DDDSuper(HAXCMSLitElementTheme) {
     this.copyrightYear = 0; // for footer copyright year
 
     // MobX variables/listeners
-    this.location = null;
     this.categoryTags = [];
     this.allTags = [];
     this.items = [];
@@ -80,18 +79,6 @@ export class CleanPortfolioTheme extends DDDSuper(HAXCMSLitElementTheme) {
       }
       this.__disposer.push(reaction);
     });
-
-    autorun(() => {
-      let location = toJS(store.location);
-      if (globalThis.document && globalThis.document.startViewTransition) {
-        globalThis.document.startViewTransition(() => {
-          this.location = location;
-        });
-      }
-      else {
-        this.location = location;
-      }
-    });
 
     // determines active layout based on following conditions:
     // - if the current page has no child, it's Text
@@ -262,7 +249,6 @@ export class CleanPortfolioTheme extends DDDSuper(HAXCMSLitElementTheme) {
       activeItem: { type: Object },
       activeParent: { type: Object },
       ancestorItem: { type: Object },
-      location: { type: Object },
       topItems: { type: Array },
       items: { type: Array },
       activeTags: { type: Array },
@@ -731,6 +717,7 @@ export class CleanPortfolioTheme extends DDDSuper(HAXCMSLitElementTheme) {
         flex-wrap: wrap;
         gap: 12px;
         margin-bottom: 20px;
+        view-transition-name: location;
       }
 
       #listing-select {
@@ -756,6 +743,7 @@ export class CleanPortfolioTheme extends DDDSuper(HAXCMSLitElementTheme) {
         display: grid;
         gap: 24px;
         width: 100%;
+        view-transition-name: location;
         grid-template-columns: repeat(4, 1fr);
       }
 

elements/haxcms-elements/demo/site.json

@@ -32,7 +32,7 @@
       "tags": ""
     },
     "theme": {
-      "element": "journey-theme",
+      "element": "clean-portfolio-theme",
       "path": "@haxtheweb/journey-theme/journey-theme.js",
       "name": "Polaris - Invent",
       "thumbnail": "build/es6/node_modules/@haxtheweb/app-hax/lib/assets/images/PartyStyle.svg",