diff --git a/src/vs/base/browser/ui/motion/motion.ts b/src/vs/base/browser/ui/motion/motion.ts index 5a1cfa28a5a..455825510eb 100644 --- a/src/vs/base/browser/ui/motion/motion.ts +++ b/src/vs/base/browser/ui/motion/motion.ts @@ -22,7 +22,7 @@ export const PANEL_CLOSE_DURATION = 75; /** * Duration in milliseconds for quick input open (entrance) animations. */ -export const QUICK_INPUT_OPEN_DURATION = 125; +export const QUICK_INPUT_OPEN_DURATION = 200; /** * Duration in milliseconds for quick input close (exit) animations. diff --git a/src/vs/platform/quickinput/browser/quickInputController.ts b/src/vs/platform/quickinput/browser/quickInputController.ts index 17ab3d2f9b2..6e4e11e17ec 100644 --- a/src/vs/platform/quickinput/browser/quickInputController.ts +++ b/src/vs/platform/quickinput/browser/quickInputController.ts @@ -717,11 +717,14 @@ export class QuickInputController extends Disposable { // Animate entrance: fade in + slide down if (!isMotionReduced(ui.container)) { + // Set initial state without transition + ui.container.style.transition = 'none'; ui.container.style.opacity = '0'; ui.container.style.transform = 'translateY(-8px)'; - ui.container.style.transition = `opacity ${QUICK_INPUT_OPEN_DURATION}ms ${EASE_OUT}, transform ${QUICK_INPUT_OPEN_DURATION}ms ${EASE_OUT}`; - // Trigger reflow so the initial state is registered before applying target + // Trigger reflow so the browser registers the initial state void ui.container.offsetHeight; + // Now apply transition and target state + ui.container.style.transition = `opacity ${QUICK_INPUT_OPEN_DURATION}ms ${EASE_OUT}, transform ${QUICK_INPUT_OPEN_DURATION}ms ${EASE_OUT}`; ui.container.style.opacity = '1'; ui.container.style.transform = 'translateY(0)'; const onDone = () => { diff --git a/src/vs/workbench/browser/media/motion.css b/src/vs/workbench/browser/media/motion.css index 75581b1bb93..79730b812c7 100644 --- a/src/vs/workbench/browser/media/motion.css +++ b/src/vs/workbench/browser/media/motion.css @@ -7,7 +7,7 @@ .monaco-workbench.monaco-enable-motion { --vscode-motion-panel-open-duration: 200ms; --vscode-motion-panel-close-duration: 75ms; - --vscode-motion-quick-input-open-duration: 125ms; + --vscode-motion-quick-input-open-duration: 200ms; --vscode-motion-quick-input-close-duration: 75ms; --vscode-motion-ease-out: cubic-bezier(0.1, 0.9, 0.2, 1); --vscode-motion-ease-in: cubic-bezier(0.9, 0.1, 1, 0.2);