LiteGraph.js主题切换动画CSS类设计：命名规范

LiteGraph.js主题切换动画CSS类设计：命名规范

【免费下载链接】litegraph.js A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently. 项目地址: https://gitcode.com/gh_mirrors/li/litegraph.js

1. 主题切换现状分析

LiteGraph.js现有CSS中已实现基础的深色/浅色主题切换功能，通过.dark类修饰器实现核心样式覆盖。例如在css/litegraph.css中定义：

.litegraph.litecontextmenu.dark {
    background-color: #000 !important;
}
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
    background-color: #000 !important;
}

但当前实现缺乏统一的动画过渡机制，直接切换类名会导致视觉跳跃。需建立完整的CSS类命名体系解决这一问题。

2. 动画CSS类命名规范设计

2.1 基础命名结构

采用lg-theme-{type}-{target}-{behavior}四段式命名法，其中：

• type: 主题类型（dark/light/sepia等）
• target: 目标元素（canvas/menu/node等）
• behavior: 动画行为（fade/slide/scale等）

2.2 状态类命名

3. 动画实现方案

3.1 过渡属性统一管理

在css/litegraph.css中定义基础过渡变量：

:root {
    --theme-transition-time: 0.3s;
    --theme-transition-props: background-color, color, border-color;
}
.lg-theme-transition {
    transition: var(--theme-transition-props) var(--theme-transition-time);
}

此方案已在editor/style.css的按钮悬停效果中验证可行性：

transition: background-color 300ms, color 300ms, padding-left 300ms;

3.2 主题切换流程图

4. 实际应用示例

4.1 画布主题切换

/* 基础样式 */
.lg-canvas {
    background-color: #f5f5f5;
}
/* 深色主题 */
.lg-theme-dark .lg-canvas {
    background-color: #1a1a1a;
}
/* 应用过渡 */
.lg-theme-transition .lg-canvas {
    transition: background-color 0.5s ease;
}

配合JavaScript切换逻辑，可实现如editor/index.html中画布背景的平滑过渡效果。

4.2 节点元素动画

节点背景色过渡效果可参考css/litegraph.css中的菜单悬停动画：

.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
    background-color: #444 !important;
    color: #eee;
    transition: all 0.2s;
}

扩展为主题切换专用类：

.lg-theme-dark .lg-node {
    background-color: #333;
    color: #ddd;
}
.lg-theme-transition .lg-node {
    transition: all var(--theme-transition-time);
}

5. 兼容性处理

5.1 浏览器前缀适配

保留editor/style.css中已有的浏览器前缀写法：

transition: background-color 300ms;
-moz-transition: background-color 300ms;
-webkit-transition: background-color 300ms;

5.2 降级方案

为不支持CSS变量的浏览器提供静态过渡定义：

.lg-theme-transition {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

6. 实施路径

1. 在css/litegraph.css中添加主题变量与基础过渡类
2. 改造现有.dark类为lg-theme-dark命名规范
3. 在主题切换逻辑中添加lg-theme-transition临时类
4. 测试editor/index.html中的全部UI组件过渡效果
5. 优化css/litegraph-editor.css中的编辑器特有样式

通过以上规范实施，可使LiteGraph.js的主题切换体验达到专业编辑器水准，同时保持CSS代码的可维护性和扩展性。

【免费下载链接】litegraph.js A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently. 项目地址: https://gitcode.com/gh_mirrors/li/litegraph.js