Ensure transitions work properly when showing and hiding DND candidate positions

This commit is contained in:
Andrew Kingston 2021-09-16 15:49:58 +01:00
parent 46867b8a19
commit 601a4935a9
2 changed files with 5 additions and 5 deletions

View File

@ -25,9 +25,7 @@
// Highlight being dragged by setting opacity // Highlight being dragged by setting opacity
const child = getDOMNodeForComponent(e.target) const child = getDOMNodeForComponent(e.target)
console.log(child)
if (child) { if (child) {
console.log("set opacity")
child.style.opacity = "0.5" child.style.opacity = "0.5"
} }
} }
@ -163,7 +161,8 @@
/> />
<DNDPositionIndicator <DNDPositionIndicator
dropInfo={dropMode !== "inside" ? dropInfo : null} componentId={dropTarget}
{dropInfo}
mode={dropMode} mode={dropMode}
color="var(--spectrum-global-color-static-green-500)" color="var(--spectrum-global-color-static-green-500)"
zIndex="940" zIndex="940"

View File

@ -1,6 +1,7 @@
<script> <script>
import Indicator from "./Indicator.svelte" import Indicator from "./Indicator.svelte"
export let componentId
export let dropInfo export let dropInfo
export let mode export let mode
export let zIndex export let zIndex
@ -24,8 +25,8 @@
} }
</script> </script>
{#key mode} {#key `${componentId}-${mode}`}
{#if dimensions} {#if dimensions && mode !== "inside"}
<Indicator <Indicator
left={dimensions.left} left={dimensions.left}
top={dimensions.top} top={dimensions.top}