fix(dees-stepper): improve stepper exit animation timing for cancel confirmation flow
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user