Skip to content

Commit

Permalink
fix(modal): Fade transition is not smooth
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarkoOleksiyenko @quentinderoubaix
MarkoOleksiyenko authored and quentinderoubaix committed Mar 1, 2024
1 parent aa91609 commit 9a0866f
Show file tree
Hide file tree
Showing 16 changed files with 40 additions and 41 deletions.
4 changes: 2 additions & 2 deletions core/src/services/transitions/bootstrap/fade.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import {createSimpleClassTransition} from '../simpleClassTransition';
export const fadeTransition = createSimpleClassTransition({
animationPendingClasses: ['fade'],
animationPendingShowClasses: ['show'],
showClasses: ['show'],
hideClasses: ['d-none'],
showClasses: ['show', 'fade'],
hideClasses: ['d-none', 'fade'],
});
1 change: 0 additions & 1 deletion e2e/samplesMarkup.chromium.e2e-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ test.describe.parallel(`Samples markup consistency check`, () => {
await page.goto(`#/${route}${routesExtraHash[route] ?? ''}`, {waitUntil: 'networkidle'});
await expect.poll(async () => (await page.locator('#root').innerHTML()).trim().length).toBeGreaterThan(0);
await routesExtraAction[route]?.(page);
await page.waitForSelector('.fade', {state: 'detached'}); // wait for fade transitions to be finished
expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${route}.html`);
});
}
Expand Down
2 changes: 1 addition & 1 deletion e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/alert-config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
<br />
<br />
<div
class="alert alert-dismissible alert-success au-alert show"
class="alert alert-dismissible alert-success au-alert fade show"
role="alert"
>
<div
Expand Down
16 changes: 8 additions & 8 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/alert-generic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
class="container p-3"
>
<div
class="alert alert-primary au-alert show"
class="alert alert-primary au-alert fade show"
role="alert"
>
<div
Expand All @@ -16,7 +16,7 @@
</div>
</div>
<div
class="alert alert-secondary au-alert show"
class="alert alert-secondary au-alert fade show"
role="alert"
>
<div
Expand All @@ -26,7 +26,7 @@
</div>
</div>
<div
class="alert alert-success au-alert show"
class="alert alert-success au-alert fade show"
role="alert"
>
<div
Expand All @@ -36,7 +36,7 @@
</div>
</div>
<div
class="alert alert-danger au-alert show"
class="alert alert-danger au-alert fade show"
role="alert"
>
<div
Expand All @@ -46,7 +46,7 @@
</div>
</div>
<div
class="alert alert-warning au-alert show"
class="alert alert-warning au-alert fade show"
role="alert"
>
<div
Expand All @@ -56,7 +56,7 @@
</div>
</div>
<div
class="alert alert-info au-alert show"
class="alert alert-info au-alert fade show"
role="alert"
>
<div
Expand All @@ -66,7 +66,7 @@
</div>
</div>
<div
class="alert alert-light au-alert show"
class="alert alert-light au-alert fade show"
role="alert"
>
<div
Expand All @@ -76,7 +76,7 @@
</div>
</div>
<div
class="alert alert-dark au-alert show"
class="alert alert-dark au-alert fade show"
role="alert"
>
<div
Expand Down
10 changes: 5 additions & 5 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/alert-icon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
class="container p-3"
>
<div
class="alert alert-success align-items-center au-alert d-flex show"
class="alert alert-success align-items-center au-alert d-flex fade show"
role="alert"
>
<span
Expand All @@ -32,7 +32,7 @@
</div>
</div>
<div
class="alert alert-warning align-items-center au-alert d-flex show"
class="alert alert-warning align-items-center au-alert d-flex fade show"
role="alert"
>
<span
Expand All @@ -58,7 +58,7 @@
</div>
</div>
<div
class="alert alert-danger align-items-center au-alert d-flex show"
class="alert alert-danger align-items-center au-alert d-flex fade show"
role="alert"
>
<span
Expand All @@ -84,7 +84,7 @@
</div>
</div>
<div
class="alert alert-info align-items-center au-alert d-flex show"
class="alert alert-info align-items-center au-alert d-flex fade show"
role="alert"
>
<span
Expand All @@ -110,7 +110,7 @@
</div>
</div>
<div
class="alert alert-light align-items-center au-alert d-flex show"
class="alert alert-light align-items-center au-alert d-flex fade show"
role="alert"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/alert-playground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
class="container p-3"
>
<div
class="alert alert-dismissible alert-primary au-alert show"
class="alert alert-dismissible alert-primary au-alert fade show"
role="alert"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/configuration-basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
class="container p-3"
>
<div
class="alert alert-primary au-alert show"
class="alert alert-primary au-alert fade show"
role="alert"
>
<div
Expand All @@ -16,7 +16,7 @@
</div>
</div>
<div
class="alert alert-secondary au-alert show"
class="alert alert-secondary au-alert fade show"
role="alert"
>
<div
Expand Down
6 changes: 3 additions & 3 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/configuration-down.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
class="container p-3"
>
<div
class="alert alert-secondary au-alert show"
class="alert alert-secondary au-alert fade show"
role="alert"
>
<div
Expand All @@ -16,7 +16,7 @@
</div>
</div>
<div
class="alert alert-secondary au-alert show"
class="alert alert-secondary au-alert fade show"
role="alert"
>
<div
Expand All @@ -26,7 +26,7 @@
</div>
</div>
<div
class="alert alert-success au-alert show"
class="alert alert-success au-alert fade show"
role="alert"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/modal-default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
</div>
</div>
<div
class="modal-backdrop show"
class="fade modal-backdrop show"
inert=""
/>
<div
class="d-block modal show"
class="d-block fade modal show"
>
<div
class="modal-dialog"
Expand Down
4 changes: 2 additions & 2 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/modal-playground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
/>
</div>
<div
class="modal-backdrop show"
class="fade modal-backdrop show"
inert=""
/>
<div
class="d-block modal show"
class="d-block fade modal show"
>
<div
class="modal-dialog"
Expand Down
4 changes: 2 additions & 2 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/modal-stack.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
</div>
</div>
<div
class="modal-backdrop show"
class="fade modal-backdrop show"
inert=""
/>
<div
class="d-block modal modal-sm show"
class="d-block fade modal modal-sm show"
>
<div
class="modal-dialog"
Expand Down
6 changes: 3 additions & 3 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/slots-usage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
class="container p-3"
>
<div
class="alert alert-primary au-alert show"
class="alert alert-primary au-alert fade show"
role="alert"
>
<div
Expand All @@ -16,7 +16,7 @@
</div>
</div>
<div
class="alert alert-secondary au-alert show"
class="alert alert-secondary au-alert fade show"
role="alert"
>
<div
Expand All @@ -26,7 +26,7 @@
</div>
</div>
<div
class="alert alert-info au-alert show"
class="alert alert-info au-alert fade show"
role="alert"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/toast-action.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
>
<div
aria-atomic="true"
class="au-toast d-flex show text-bg-success toast toast-dismissible"
class="au-toast d-flex fade show text-bg-success toast toast-dismissible"
role="alert"
>
<div
Expand Down
10 changes: 5 additions & 5 deletions e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/toast-default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</p>
<div
aria-atomic="true"
class="au-toast show text-bg-primary toast toast-dismissible"
class="au-toast fade show text-bg-primary toast toast-dismissible"
role="alert"
>
<div
Expand Down Expand Up @@ -54,7 +54,7 @@ <h3>
>
<div
aria-atomic="true"
class="au-toast d-flex show text-bg-success toast"
class="au-toast d-flex fade show text-bg-success toast"
role="alert"
>
<div
Expand All @@ -69,7 +69,7 @@ <h3>
>
<div
aria-atomic="true"
class="au-toast d-flex show text-bg-danger toast"
class="au-toast d-flex fade show text-bg-danger toast"
role="alert"
>
<div
Expand All @@ -84,7 +84,7 @@ <h3>
>
<div
aria-atomic="true"
class="au-toast d-flex show text-bg-info toast"
class="au-toast d-flex fade show text-bg-info toast"
role="alert"
>
<div
Expand All @@ -99,7 +99,7 @@ <h3>
>
<div
aria-atomic="true"
class="au-toast d-flex show text-bg-warning toast"
class="au-toast d-flex fade show text-bg-warning toast"
role="alert"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion e2e/samplesMarkup.chromium.e2e-spec.ts-snapshots/toast-playground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
>
<div
aria-atomic="true"
class="au-toast d-flex show toast toast-dismissible"
class="au-toast d-flex fade show toast toast-dismissible"
role="alert"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions e2e/toast/toast.e2e-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ test.describe(`Toast tests`, () => {
const toastPO = new ToastPO(page);

const expectedState: State = {
rootClasses: ['au-toast', 'd-flex', 'show', 'text-bg-primary', 'toast', 'toast-dismissible'],
rootClasses: ['au-toast', 'd-flex', 'fade', 'show', 'text-bg-primary', 'toast', 'toast-dismissible'],
body: 'This is a toast',
header: undefined,
closeButton: 'Close',
Expand All @@ -55,7 +55,7 @@ test.describe(`Toast tests`, () => {
const toastPO = new ToastPO(page);

const expectedState: State = {
rootClasses: ['au-toast', 'show', 'text-bg-primary', 'toast'],
rootClasses: ['au-toast', 'fade', 'show', 'text-bg-primary', 'toast'],
body: 'This is a toast',
header: 'Header',
closeButton: undefined,
Expand Down

0 comments on commit 9a0866f

Please sign in to comment.