fix(dees-stepper): improve stepper exit animation timing for cancel confirmation flow

This commit is contained in:
2026-04-12 09:24:23 +00:00
parent 8a1be59a51
commit e87898ab82
3 changed files with 20 additions and 6 deletions

View File

@@ -154,9 +154,14 @@ export class DeesStepper extends DeesElement {
height: 100vh;
}
.stepperContainer.predestroy {
opacity: 0;
transition: opacity 0.2s ease-in;
/* Exit animation — reverse of the entry. Tiles slide DOWN + fade out,
mirroring the .entrance slide-up. The transition override is needed
because dees-tile.step has its own 0.7s transition for step selection
which would otherwise make the exit sluggish. */
.stepperContainer.predestroy dees-tile.step {
transform: translateY(16px);
filter: opacity(0);
transition: transform 0.25s, filter 0.2s;
}
dees-tile.step {
@@ -639,7 +644,9 @@ export class DeesStepper extends DeesElement {
name: 'Yes, cancel',
action: async (modal) => {
this.cancelConfirmModal = undefined;
await modal!.destroy();
modal!.destroy(); // fire-and-forget — starts the confirm modal fade
const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(100);
await this.destroy();
},
},
@@ -651,7 +658,7 @@ export class DeesStepper extends DeesElement {
const domtools = await this.domtoolsPromise;
const container = this.shadowRoot!.querySelector('.stepperContainer');
container?.classList.add('predestroy');
await domtools.convenience.smartdelay.delayFor(200);
await domtools.convenience.smartdelay.delayFor(250);
if (this.parentElement) {
this.parentElement.removeChild(this);
}