filipkopyt14/Profectus
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests Releases Activity Actions

Added animation to nodes appearing/disappearing

Browse source
This commit is contained in:
thepaperpilot 2021-08-26 00:13:42 -05:00
parent ae0fbd09eb
commit af57840dc6
1 changed files with 91 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -44,8 +44,8 @@
</g> </g>
</transition> </transition>
<transition name="grow" appear>
<g <g
v-if="shape === Shape.Circle"
@mouseenter="mouseEnter" @mouseenter="mouseEnter"
@mouseleave="mouseLeave" @mouseleave="mouseLeave"
@mousedown="mouseDown" @mousedown="mouseDown"
@ -53,6 +53,7 @@
@mouseup="mouseUp" @mouseup="mouseUp"
@touchend="mouseUp" @touchend="mouseUp"
> >
<g v-if="shape === Shape.Circle">
<circle <circle
v-if="canAccept" v-if="canAccept"
:r="size + 8" :r="size + 8"
@ -81,22 +82,14 @@
:stroke="progressColor" :stroke="progressColor"
/> />
</g> </g>
<g <g v-else-if="shape === Shape.Diamond" transform="rotate(45, 0, 0)">
v-else-if="shape === Shape.Diamond"
transform="rotate(45, 0, 0)"
@mouseenter="mouseEnter"
@mouseleave="mouseLeave"
@mousedown="mouseDown"
@touchstart="mouseDown"
@mouseup="mouseUp"
@touchend="mouseUp"
>
<rect <rect
v-if="canAccept" v-if="canAccept"
:width="size * sqrtTwo + 16" :width="size * sqrtTwo + 16"
:height="size * sqrtTwo + 16" :height="size * sqrtTwo + 16"
:transform=" :transform="
`translate(${-(size * sqrtTwo + 16) / 2}, ${-(size * sqrtTwo + 16) / 2})` `translate(${-(size * sqrtTwo + 16) / 2}, ${-(size * sqrtTwo + 16) /
2})`
" "
:fill="backgroundColor" :fill="backgroundColor"
:stroke="receivingNode ? '#0F0' : '#0F03'" :stroke="receivingNode ? '#0F0' : '#0F03'"
@ -117,10 +110,8 @@
:width="Math.max(size * sqrtTwo * progress - 2, 0)" :width="Math.max(size * sqrtTwo * progress - 2, 0)"
:height="Math.max(size * sqrtTwo * progress - 2, 0)" :height="Math.max(size * sqrtTwo * progress - 2, 0)"
:transform=" :transform="
`translate(${-Math.max(size * sqrtTwo * progress - 2, 0) / 2}, ${-Math.max( `translate(${-Math.max(size * sqrtTwo * progress - 2, 0) /
size * sqrtTwo * progress - 2, 2}, ${-Math.max(size * sqrtTwo * progress - 2, 0) / 2})`
0
) / 2})`
" "
:fill="progressColor" :fill="progressColor"
/> />
@ -128,16 +119,22 @@
v-else v-else
:width="size * sqrtTwo + 9" :width="size * sqrtTwo + 9"
:height="size * sqrtTwo + 9" :height="size * sqrtTwo + 9"
:transform="`translate(${-(size * sqrtTwo + 9) / 2}, ${-(size * sqrtTwo + 9) / 2})`" :transform="
`translate(${-(size * sqrtTwo + 9) / 2}, ${-(size * sqrtTwo + 9) / 2})`
"
fill="transparent" fill="transparent"
:stroke-dasharray="(size * sqrtTwo + 9) * 4" :stroke-dasharray="(size * sqrtTwo + 9) * 4"
:stroke-width="5" :stroke-width="5"
:stroke-dashoffset="(size * sqrtTwo + 9) * 4 - progress * (size * sqrtTwo + 9) * 4" :stroke-dashoffset="
(size * sqrtTwo + 9) * 4 - progress * (size * sqrtTwo + 9) * 4
"
:stroke="progressColor" :stroke="progressColor"
/> />
</g> </g>
<text :fill="titleColor" class="node-title">{{ title }}</text> <text :fill="titleColor" class="node-title">{{ title }}</text>
</g>
</transition>
<transition name="fade" appear> <transition name="fade" appear>
<text <text
@ -389,6 +386,11 @@ export default defineComponent({
opacity: 0.25; opacity: 0.25;
} }
} }
.grow-enter-from,
.fade-leave-to {
transform: scale(0);
}
</style> </style>
<style> <style>