Updated for codepen

Author: martrapp

src/pages/basics/_pseudo.astro

@@ -15,10 +15,7 @@
     <button>Click</button>
     <div class="outer">
       <div class="container">
-        <div
-          id="ball"
-          style="view-transition-name: ball; width:200px; height: 200px;border-radius: 50%; background-color: darkgreen"
-        >
+        <div id="ball">
           <ul>
             <li>item 1</li>
             <li>item 2</li>
@@ -46,13 +43,18 @@
       });
 
       document.addEventListener("click", () => {
-        console.log("state change");
 
         container.startViewTransition!(() => {
-          const state = container.getAttribute("data-state");
-          container.style.alignItems =
-            state !== "2" ? "flex-start" : "flex-end";
-          container.setAttribute("data-state", state !== "2" ? "2" : "1");
+          container.setAttribute(
+            "data-state",
+            container.getAttribute("data-state") !== "2" ? "2" : "1",
+          );
+        }).ready.then(()=>{
+          container.style.viewTransitionScope = "none";
+          container.insertAdjacentHTML("beforeend","<div class=new-element>New Element</div")
+          const style = getComputedStyle(container);
+          console.log(style.viewTransitionScope)
+          outer.startViewTransition!();
         });
       });
     </script>
@@ -77,24 +79,30 @@
     }
 
     .container {
+      view-transition-name: none;
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       justify-content: center;
       min-height: 100vh;
       padding: 16px;
       gap: 12px;
+      view-transition-scope: none !important;
     }
 
-    ::view-transition-group(ball) {
+    .new-element {
+      view-transition-name: match-element;
+    }
+    #ball {
       view-transition-name: ball;
+      width: 200px;
+      height: 200px;
+      border-radius: 50%;
+      background-color: darkgreen;
     }
-    .container {
-      view-transition-name: none;
-      view-transition-scope: none !important;
-      &::view-transition-group(ball) {
-        view-transition-scope: none !important;
-      }
+
+    .container[data-state="2"] {
+      align-items: flex-start;
     }
   </style>
 </html>