-
+
+
+
-
-
- {{ Math.round(brushOpacity * 100) }}%
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+ {{ Math.round(brushOpacity * 100) }}%
+
+
+
+
+
+
@@ -139,7 +148,6 @@ import { BrushStore } from "../store/BrushStore";
import { OperationType } from "../utils/layerHelper";
import { inject } from "vue";
import VerticalSlider from "./VerticalSlider.vue";
-import SvgIcon from "@/component/Canvas/SvgIcon/index.vue";
const props = defineProps({
activeTool: {
@@ -462,6 +470,13 @@ watch(
color: #333;
user-select: none;
-webkit-user-select: none;
+
+ // 添加高度过渡动画
+ transition: height 0.3s ease-out, min-height 0.3s ease-out;
+ // overflow: hidden;
+
+ transform: translate3d(0, -50%, 0); // 确保使用3D变换以提高性能
+ opacity: 1;
}
// 笔刷大小预览相关样式
@@ -660,27 +675,49 @@ watch(
}
// 淡入淡出动画
-.fade-enter-active,
-.fade-leave-active {
+.brush-control-canel-fade-enter-active,
+.brush-control-canel-fade-leave-active {
transition: opacity 0.3s, transform 0.3s;
}
-.fade-enter-from,
-.fade-leave-to {
+.brush-control-canel-fade-enter-from,
+.brush-control-canel-fade-leave-to {
opacity: 0;
transform: translateX(-10px) translateY(-50%);
}
+// 颜色选择器过渡动画
+.color-picker-fade-enter-active,
+.color-picker-fade-leave-active {
+ transition: opacity 0.25s ease-out, transform 0.25s ease-out;
+}
+.color-picker-fade-enter-from,
+.color-picker-fade-leave-to {
+ opacity: 0;
+ transform: translateY(-8px) scale(0.95);
+}
+
+// 透明度滑块过渡动画
+.opacity-slider-fade-enter-active,
+.opacity-slider-fade-leave-active {
+ transition: opacity 0.25s ease-out, transform 0.25s ease-out;
+}
+.opacity-slider-fade-enter-from,
+.opacity-slider-fade-leave-to {
+ opacity: 0;
+ transform: translateY(8px) scale(0.95);
+}
+
// 响应式调整
@media (max-height: 600px) {
.brush-control-panel {
- transform: translateY(-50%);
+ gap: 10px;
}
}
@media (max-width: 768px) {
.brush-control-panel {
left: 10px;
- // padding: 12px;
+ padding: 12px 3px;
}
}
diff --git a/src/component/Canvas/CanvasEditor/components/BrushPanel.vue b/src/component/Canvas/CanvasEditor/components/BrushPanel.vue
index 5cbbe5b2..7a9055c7 100644
--- a/src/component/Canvas/CanvasEditor/components/BrushPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/BrushPanel.vue
@@ -1,338 +1,350 @@
-