diff --git a/resources/css/components/page-tree.css b/resources/css/components/page-tree.css
index 5e93c6c3f4..3cf0142ac3 100644
--- a/resources/css/components/page-tree.css
+++ b/resources/css/components/page-tree.css
@@ -7,10 +7,13 @@
     }
     .tree-node {
         @apply dark:pb-0.25;
-        transition: opacity var(--starting-style-transition-duration);
-        transition-delay: calc(sibling-index() * var(--starting-style-sibling-delay));
-        @starting-style {
-            opacity: 0;
+        /* We only want to animate tree nodes on page load. We don't want to animate child nodes when toggling them open, less it looks glitchy and feels unresponsive. */
+        &:not(.page-tree--ready &) {
+            transition: opacity var(--starting-style-transition-duration);
+            transition-delay: calc(sibling-index() * var(--starting-style-sibling-delay));
+            @starting-style {
+                opacity: 0;
+            }
         }
     }
     .page-tree-branch {
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
index 8f2f03f0fa..fab462820a 100644
--- a/resources/js/components/structures/PageTree.vue
+++ b/resources/js/components/structures/PageTree.vue
@@ -18,7 +18,7 @@
                     </div>
                 </div>
             </ui-panel-header>
-            <div v-if="!loading" class="page-tree">
+            <div v-if="!loading" class="page-tree" :class="{ 'page-tree--ready': ready }">
                 <Draggable
                     ref="tree"
                     v-model="treeData"
@@ -127,6 +127,7 @@ export default {
             treeData: [],
             collapsedState: [],
             discardingChanges: false,
+            ready: false,
         };
     },
 
@@ -172,6 +173,10 @@ export default {
         });
     },
 
+    mounted() {
+        setTimeout(() => this.ready = true, 500); // arbitrary delay after initial transitions
+    },
+
     methods: {
         isRoot(stat) {
             if (!this.expectsRoot) {