diff --git a/src/alerts/README.md b/src/alerts/README.md index 7a8bbb0..0abfbbb 100644 --- a/src/alerts/README.md +++ b/src/alerts/README.md @@ -62,10 +62,6 @@ type AlertOptions = { // If -1, the alert will not automatically disappear. // If undefined, the default value will be used. duration?: number; - - // Whether or not to animate the alert in, using a hello-goodbye transition. - // Defaults to true. - animate?: boolean; }; // The `key` and `duration` options can also be specified as [data-*] attributes @@ -90,23 +86,6 @@ ui-alerts { flex-direction: column-reverse; align-items: flex-end; } - -/* Transitions can be applied to alerts using hello-goodbye */ -@media (prefers-reduced-motion: no-preference) { - ui-alerts > .enter-active, - ui-alerts > .leave-active, - ui-alerts > .move { - transition: all 0.5s; - } - - ui-alerts > .enter-from { - transform: translateY(-100%); - } - - ui-alerts > .leave-to { - opacity: 0; - } -} ``` ## Further Reading diff --git a/src/alerts/alerts.ts b/src/alerts/alerts.ts index 621788a..8aabfb2 100644 --- a/src/alerts/alerts.ts +++ b/src/alerts/alerts.ts @@ -1,9 +1,6 @@ -import { hello, goodbye, move } from 'hello-goodbye'; - export type AlertOptions = { key?: string; duration?: number; - animate?: boolean; }; export default class AlertsElement extends HTMLElement { @@ -42,7 +39,7 @@ export default class AlertsElement extends HTMLElement { } for (const child of this.children) { - this.show(child as HTMLElement, { animate: false }); + this.show(child as HTMLElement); } } @@ -54,16 +51,7 @@ export default class AlertsElement extends HTMLElement { el.dataset.key = key; if (!this.contains(el)) { - if (options.animate === false) { - this.append(el); - } else { - move(this.children, () => { - this.append(el); - hello(el); - }); - } - } else { - hello(el); + this.append(el); } this.added.add(el); @@ -105,9 +93,7 @@ export default class AlertsElement extends HTMLElement { this.added.delete(elOrKey); - move(this.children, () => - goodbye(elOrKey).then(() => elOrKey.remove()) - ); + elOrKey.remove(); this.clearTimeout(elOrKey); }