Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-27 10:14:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix/toolbox animation (#5197)

Browse Source 
* fix: animation state handling

* fix: animation timing

* refator: remove out of scope changes

* refactor: remove unused types

* fix: animation timing

* fix: animation properties

* refactor: remove unneeded transaltez/3d hack because we dont support safari

* refactor: pr feedback

* consistent translate functions

* Update test expectations [skip ci]

* Remove EditModelButton

* fix: update toolbox position test bounds

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: bymyself <cbyrne@comfy.org>
This commit is contained in:
Simula_r
2025-08-27 10:31:52 -07:00
committed by GitHub
parent 1bdc190154
commit 20181195e1
5 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/graph/SelectionToolbox.vue
View File

@@ -1,16 +1,13 @@
<template>
<Transition name="slide-up">
<!-- Wrapping panel in div to get correct ref because panel ref is not of raw dom el -->
<div
v-show="visible"
ref="toolboxRef"
style="
transform: translate(calc(var(--tb-x) - 50%), calc(var(--tb-y) - 120%));
"
class="selection-toolbox fixed left-0 top-0 z-40"
>
<div
ref="toolboxRef"
style="transform: translate(var(--tb-x), var(--tb-y))"
class="fixed left-0 top-0 z-40"
>
<Transition name="slide-up">
<Panel
class="rounded-lg"
v-if="visible"
class="rounded-lg selection-toolbox"
:pt="{
header: 'hidden',
content: 'p-0 flex flex-row'
@@ -33,8 +30,8 @@
/>
<HelpButton />
</Panel>
</div>
</Transition>
</Transition>
</div>
</template>
<script setup lang="ts">
@@ -84,22 +81,31 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
</script>
<style scoped>
.selection-toolbox {
transform: translateX(-50%) translateY(-120%);
will-change: transform, opacity;
}
@keyframes slideUp {
0% {
transform: translateX(-50%) translateY(-100%);
opacity: 0;
}
50% {
transform: translateX(-50%) translateY(-125%);
opacity: 0.5;
}
100% {
transform: translateX(-50%) translateY(-120%);
opacity: 1;
}
}
.slide-up-enter-active {
opacity: 1;
transition: all 0.3s ease-out;
animation: slideUp 125ms ease-out;
}
.slide-up-leave-active {
transition: none;
}
.slide-up-enter-from {
transform: translateY(-100%);
opacity: 0;
}
.slide-up-leave-to {
transform: translateY(0);
opacity: 0;
animation: slideUp 25ms ease-out reverse;
}
</style>