diff --git a/packages/core/src/Overlay.vue b/packages/core/src/Overlay.vue index 8128dd8..da5ca69 100644 --- a/packages/core/src/Overlay.vue +++ b/packages/core/src/Overlay.vue @@ -33,6 +33,7 @@ export default { column: 0, }, KEY_IGNORE, + animation: !inspectorOptions.reduceMotion, } }, computed: { @@ -305,7 +306,7 @@ export default { @@ -366,7 +367,6 @@ export default { z-index: 2147483647; position: fixed; transform: translateX(-50%); - transition: all 0.1s ease-in; pointer-events: none; } @@ -376,7 +376,16 @@ export default { background-color:#42b88325; border: 1px solid #42b88350; border-radius: 5px; - transition: all 0.1s ease-in; pointer-events: none; } + +.vue-inspector-animated { + transition: all 0.1s ease-in; +} + +@media (prefers-reduced-motion) { + .vue-inspector-animated { + transition: none !important; + } +} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index abe0bac..031e60a 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -110,6 +110,12 @@ export interface VitePluginInspectorOptions { * @default process.env.LAUNCH_EDITOR ?? code (Visual Studio Code) */ launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' | string + + /** + * Disable animation/transition, will auto disable when `prefers-reduced-motion` is set + * @default false + */ + reduceMotion?: boolean } const toggleComboKeysMap = { @@ -136,6 +142,7 @@ export const DEFAULT_INSPECTOR_OPTIONS: VitePluginInspectorOptions = { appendTo: '', lazyLoad: false, launchEditor: process.env.LAUNCH_EDITOR ?? 'code', + reduceMotion: false, } as const function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPECTOR_OPTIONS): PluginOption {