diff --git a/.circleci/config.yml b/.circleci/config.yml
index 02d38938ed..b9ba1577d2 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -14,7 +14,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: 62ecc57a00a4e68cdacbad3ce6f0a205fda2e002
+        default: 9c9e2a5818fbeefd38050958043b93f7b161ef5b
     wireit_cache_name:
         type: string
         default: wireit
diff --git a/packages/dialog/src/DialogBase.ts b/packages/dialog/src/DialogBase.ts
index 0796833eb6..81eb5396a8 100644
--- a/packages/dialog/src/DialogBase.ts
+++ b/packages/dialog/src/DialogBase.ts
@@ -155,18 +155,41 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
         this.handleTransitionEvent(event);
     }
 
+    private get hasTransitionDuration(): boolean {
+        const modal = this.shadowRoot.querySelector('.modal') as HTMLElement;
+
+        const modalTransitionDurations =
+            window.getComputedStyle(modal).transitionDuration;
+        for (const duration of modalTransitionDurations.split(','))
+            if (parseFloat(duration) > 0) return true;
+
+        const underlay = this.shadowRoot.querySelector(
+            'sp-underlay'
+        ) as HTMLElement;
+
+        if (underlay) {
+            const underlayTransitionDurations =
+                window.getComputedStyle(underlay).transitionDuration;
+            for (const duration of underlayTransitionDurations.split(','))
+                if (parseFloat(duration) > 0) return true;
+        }
+
+        return false;
+    }
+
     protected override update(changes: PropertyValues<this>): void {
         if (changes.has('open') && changes.get('open') !== undefined) {
+            const hasTransitionDuration = this.hasTransitionDuration;
             this.animating = true;
             this.transitionPromise = new Promise((res) => {
                 this.resolveTransitionPromise = () => {
                     this.animating = false;
+                    if (!this.open && hasTransitionDuration)
+                        this.dispatchClosed();
                     res();
                 };
             });
-            if (!this.open) {
-                this.dispatchClosed();
-            }
+            if (!this.open && !hasTransitionDuration) this.dispatchClosed();
         }
         super.update(changes);
     }
diff --git a/packages/dialog/stories/dialog-base.stories.ts b/packages/dialog/stories/dialog-base.stories.ts
index dafcc9fdaa..371969fc5a 100644
--- a/packages/dialog/stories/dialog-base.stories.ts
+++ b/packages/dialog/stories/dialog-base.stories.ts
@@ -10,33 +10,31 @@ governing permissions and limitations under the License.
 */
 
 import { html, TemplateResult } from '@spectrum-web-components/base';
+import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/checkbox/sp-checkbox.js';
 import '@spectrum-web-components/dialog/sp-dialog-base.js';
 import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/button/sp-button.js';
+import { trigger } from '@spectrum-web-components/overlay';
 import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/checkbox/sp-checkbox.js';
 import { alertDestructive } from './dialog.stories.js';
 import { portrait } from './images.js';
 import { disabledButtonDecorator } from './index.js';
 
+const withOverlayDecorator = (story: () => TemplateResult): TemplateResult => {
+    return html`
+        <sp-button variant="primary" id="trigger">Toggle Dialog</sp-button>
+        <sp-overlay type="modal" trigger="trigger@click" open>
+            ${story()}
+        </sp-overlay>
+    `;
+};
+
 export default {
     title: 'Dialog Base',
     component: 'sp-dialog-base',
-    decorators: [
-        (story: () => TemplateResult): TemplateResult => {
-            return html`
-                <sp-button variant="primary" id="trigger">
-                    Toggle Dialog
-                </sp-button>
-                <sp-overlay type="modal" trigger="trigger@click" open>
-                    ${story()}
-                </sp-overlay>
-            `;
-        },
-    ],
 };
 
-export const Slotted = (): TemplateResult => html`
+export const slotted = (): TemplateResult => html`
     <sp-dialog-base
         underlay
         @click=${(event: Event) => {
@@ -50,6 +48,7 @@ export const Slotted = (): TemplateResult => html`
         ${alertDestructive()}
     </sp-dialog-base>
 `;
+slotted.decorators = [withOverlayDecorator];
 
 export const disabledButton = (): TemplateResult => {
     return html`
@@ -116,7 +115,7 @@ export const disabledButton = (): TemplateResult => {
     `;
 };
 
-disabledButton.decorators = [disabledButtonDecorator];
+disabledButton.decorators = [withOverlayDecorator, disabledButtonDecorator];
 
 export const notAgain = (): TemplateResult => html`
     <sp-dialog-base
@@ -143,6 +142,7 @@ export const notAgain = (): TemplateResult => html`
         </sp-dialog>
     </sp-dialog-base>
 `;
+notAgain.decorators = [withOverlayDecorator];
 
 export const moreCustom = (): TemplateResult => html`
     <sp-dialog-base
@@ -189,6 +189,7 @@ export const moreCustom = (): TemplateResult => html`
         </div>
     </sp-dialog-base>
 `;
+moreCustom.decorators = [withOverlayDecorator];
 
 export const fullyCustom = (): TemplateResult => html`
     <sp-dialog-base
@@ -222,3 +223,46 @@ export const fullyCustom = (): TemplateResult => html`
         </div>
     </sp-dialog-base>
 `;
+fullyCustom.decorators = [withOverlayDecorator];
+
+export const lazyLoaded = (): TemplateResult => {
+    const template = (): TemplateResult => html`
+        <sp-dialog-base
+            underlay
+            @click=${(event: Event) => {
+                if ((event.target as HTMLElement).localName === 'sp-button') {
+                    (event.target as HTMLElement).dispatchEvent(
+                        new Event('close', { bubbles: true, composed: true })
+                    );
+                }
+            }}
+        >
+            <sp-dialog size="m">
+                <h2 slot="heading">This is a heading</h2>
+                <p>
+                    The click on the "OK" button should close the overlay with
+                    the correct animation (duration).
+                </p>
+                <sp-button variant="secondary" treatment="fill" slot="button">
+                    Ok
+                </sp-button>
+            </sp-dialog>
+        </sp-dialog-base>
+    `;
+
+    return html`
+        <sp-button
+            variant="primary"
+            ${trigger(template, {
+                open: false,
+                triggerInteraction: 'click',
+            })}
+        >
+            Open dialog
+        </sp-button>
+    `;
+};
+
+lazyLoaded.swc_vrt = {
+    skip: true,
+};