thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fixed grow animation not working on nodes disappearing

Browse source
This commit is contained in:
thepaperpilot 2021-08-26 00:28:03 -05:00
parent af57840dc6
commit 1709fe3079
2 changed files with 106 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/board/Board.vue
View file

@ -20,9 +20,9 @@
<BoardLink :link="link" />
</g>
</transition-group>
<transition-group name="grow" :duration="500" appear>
<g v-for="node in nodes" :key="node.id" style="transition-duration: 0s">
<BoardNode
v-for="node in nodes"
:key="node.id"
:node="node"
:nodeType="board.types[node.type]"
:dragging="draggingNode"
@ -33,6 +33,8 @@
@endDragging="endDragging"
/>
</g>
</transition-group>
</g>
</svg>
</panZoom>
</template>

13
src/components/board/BoardNode.vue
View file

@ -44,8 +44,8 @@
</g>
</transition>
<transition name="grow" appear>
<g
class="node-container"
@mouseenter="mouseEnter"
@mouseleave="mouseLeave"
@mousedown="mouseDown"
@ -134,7 +134,6 @@
<text :fill="titleColor" class="node-title">{{ title }}</text>
</g>
</transition>
<transition name="fade" appear>
<text
@ -386,11 +385,6 @@ export default defineComponent({
opacity: 0.25;
}
}
.grow-enter-from,
.fade-leave-to {
transform: scale(0);
}
</style>
<style>
@ -398,4 +392,9 @@ export default defineComponent({
.actions-leave-to .action {
transform: translate(0, 0);
}
.grow-enter-from .node-container,
.grow-leave-to .node-container {
transform: scale(0);
}
</style>