no animate

This commit is contained in:
Gerard Burns 2024-04-05 09:48:38 +01:00
parent 477813feef
commit b1aa8b36f2
1 changed files with 9 additions and 0 deletions

View File

@ -6,6 +6,7 @@
export let anchor export let anchor
export let visible = false export let visible = false
export let offset = 0; export let offset = 0;
export let noAnimation = false
$: target = getContext(Context.PopoverRoot) || "#app" $: target = getContext(Context.PopoverRoot) || "#app"
@ -67,8 +68,10 @@
fill: "forwards" fill: "forwards"
}; };
if (!noAnimation) {
currentTooltip.animate(fadeIn, fadeInTiming); currentTooltip.animate(fadeIn, fadeInTiming);
previousTooltip.animate(fadeOut, fadeOutTiming); previousTooltip.animate(fadeOut, fadeOutTiming);
}
// Bypass animations if the tooltip has only just been opened // Bypass animations if the tooltip has only just been opened
if (initialShow) { if (initialShow) {
@ -115,6 +118,7 @@
style:height={`${currentTooltipHeight}px`} style:height={`${currentTooltipHeight}px`}
class="tooltip" class="tooltip"
class:visible={visible || hovering} class:visible={visible || hovering}
class:noAnimation
> >
<!-- absolutely position element with the opposite positioning, so that the tooltip elements can be positioned <!-- absolutely position element with the opposite positioning, so that the tooltip elements can be positioned
using the same values as the root wrapper, while still being occluded by it. using the same values as the root wrapper, while still being occluded by it.
@ -122,6 +126,7 @@
<div class="screenSizeAbsoluteWrapper" <div class="screenSizeAbsoluteWrapper"
style:left={`${-currentX}px`} style:left={`${-currentX}px`}
style:top={`${-currentY}px`} style:top={`${-currentY}px`}
class:noAnimation
> >
<div <div
bind:this={currentTooltip} bind:this={currentTooltip}
@ -167,6 +172,10 @@
transition: top 300ms ease-in, left 300ms ease-in; transition: top 300ms ease-in, left 300ms ease-in;
} }
.noAnimation {
transition: none;
}
.visible { .visible {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;