diff --git a/docs/getting-started/customizing.md b/docs/getting-started/customizing.md index 135da3779..76b276db0 100644 --- a/docs/getting-started/customizing.md +++ b/docs/getting-started/customizing.md @@ -111,7 +111,7 @@ Not all components expose CSS custom properties. For those that do, they can be Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Shoelace's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation. -To customize a default animation, use the `setDefaultAnimation()` method. The function accepts an animation name (found in the component's docs) and an object with `keyframes` and `options`. +To customize a default animation, use the `setDefaultAnimation()` method. The function accepts an animation name (found in the component's docs) and an object with `keyframes` and `options` or `null` to disable the animation. This example will make all dialogs use a custom show animation. diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index c2f12e281..fce64b947 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- Allow `null` to be passed to disable animations in `setDefaultAnimation()` and `setAnimation()` - Fixed a bug in `sl-dropdown` where a `keydown` listener wasn't cleaned up properly - Fixed a bug in `sl-select` where `sl-blur` was emitted prematurely [#456](https://github.com/shoelace-style/shoelace/issues/456) - Fixed a bug in `sl-select` where no selection with `multiple` resulted in an incorrect value [#457](https://github.com/shoelace-style/shoelace/issues/457) diff --git a/src/utilities/animation-registry.ts b/src/utilities/animation-registry.ts index c786495b5..7395c3106 100644 --- a/src/utilities/animation-registry.ts +++ b/src/utilities/animation-registry.ts @@ -10,22 +10,26 @@ interface ElementAnimationMap { const defaultAnimationRegistry = new Map(); const customAnimationRegistry = new WeakMap(); +function ensureAnimation(animation: ElementAnimation | null) { + return animation ?? { keyframes: [], options: { duration: 0 } }; +} + // // Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation` // for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`. // -export function setDefaultAnimation(animationName: string, animation: ElementAnimation) { - defaultAnimationRegistry.set(animationName, animation); +export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) { + defaultAnimationRegistry.set(animationName, ensureAnimation(animation)); } // // Sets a custom animation for the specified element. // -export function setAnimation(el: Element, animationName: string, animation: ElementAnimation) { +export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) { customAnimationRegistry.set( el, Object.assign({}, customAnimationRegistry.get(el), { - [animationName]: animation + [animationName]: ensureAnimation(animation) }) ); }