animate

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -44,10 +44,24 @@ export const View = defineComponent({
         left: 0,
         right: 0,
         bottom: 0,
+        zIndex: -1,
       };
       return bgS;
     }
 
+    function getAniStyles(comp: any) {
+      if (!comp.layout.anim) return "";
+      if (
+        comp.layout.anim &&
+        state.showAnimation &&
+        ((!props.showMask && store.isEditMode) || !store.isEditMode)
+      ) {
+        return `animate__animated animate__${comp.layout.anim} animate__delay-0.1s`;
+      } else {
+        return "opacity-0";
+      }
+    }
+
     onUnmounted(() => {
       intersectionObserver.disconnect();
     });
@@ -73,7 +87,8 @@ export const View = defineComponent({
       const gizmo = controls.selectCtrl.gizmo;
       const page = controls.pageCtrl;
 
-      const showBgDiv = comp.compKey == "Container" && isPreview && !isLongPage;
+      const showBgDiv = isPreview && !isLongPage;
+      const isContiner = comp.compKey == "Container";
 
       let isFocus =
         store.isEditMode &&
@@ -86,11 +101,12 @@ export const View = defineComponent({
         style["transform-origin"] = "center center";
       }
 
+      const cardStyles = helper.createViewStyles(comp.layout, comp);
       let bgStyles: any = {};
       if (showBgDiv) {
         bgStyles = createBgStyles();
-        bgStyles.background = style.background;
-        delete style.background;
+        bgStyles.background = cardStyles.background;
+        delete cardStyles.background;
       }
 
       if (isStreamCard) {
@@ -98,14 +114,7 @@ export const View = defineComponent({
         style.position = "relative";
       }
 
-      let aniStyles = "";
-      if (
-        comp.layout.anim &&
-        state.showAnimation &&
-        ((!props.showMask && store.isEditMode) || !store.isEditMode)
-      ) {
-        aniStyles = `animate__animated animate__${comp.layout.anim} animate__delay-0.1s`;
-      }
+      const aniStyles = getAniStyles(comp);
 
       function RenderPre() {
         if (
@@ -178,8 +187,7 @@ export const View = defineComponent({
 
       return (
         <>
-          {showBgDiv && <div style={bgStyles}></div>}
-
+          {showBgDiv && isContiner && <div style={bgStyles}></div>}
           <div
             {...attrs}
             ref={compRef}
@@ -203,9 +211,8 @@ export const View = defineComponent({
             onDblclick={() => emit("dblclick")}
           >
             <div
-              class={cx(
-                comp.layout.anim ? (aniStyles ? aniStyles : "opacity-0") : ""
-              )}
+              class={aniStyles}
+              style={cardStyles}
               onMousemove={(e) => {
                 if (
                   !store.isEditMode ||
@@ -216,6 +223,7 @@ export const View = defineComponent({
                 controls.editorCtrl.clickPickComp(props.compId);
               }}
             >
+              {showBgDiv && !isContiner && <div style={bgStyles}></div>}
               {slots.default?.()}
             </div>
 

src/modules/editor/module/helpers/index.ts

@@ -5,7 +5,7 @@ import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { Design_Page_Size, Design_Pixel_Ratio } from "../../dicts/CompOptions";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
+import { createCompStyle, createViewStyles } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
 import { designSizeToPx, pxToDesignSize } from "../utils";
 
@@ -122,6 +122,9 @@ export const helpers = EditorModule.helper({
   createStyle(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
     return createCompStyle(this, layout, comp);
   },
+  createViewStyles(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
+    return createViewStyles(this, layout);
+  },
   isCurrComp(compId: string) {
     const gizmo = this.controls.selectCtrl.gizmo;
     return gizmo.selectedIds.length == 1 && gizmo.selected[0].comp.id === compId;

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -1,33 +1,20 @@
 import { formatColor } from "@/modules/editor/components/CompUI/formItems/NewColorPicker/ColorList";
 import { Matrix } from "@/modules/editor/controllers/SelectCtrl/matrix";
+import { Transform } from "@/modules/editor/controllers/SelectCtrl/objects/transform";
 import { EditorModule } from "@/modules/editor/module";
 import { Layout } from "@/modules/editor/typings";
 import { DesignComp } from "../DesignComp";
 import { compMasks } from "./CompMasks";
-import { Transform } from "@/modules/editor/controllers/SelectCtrl/objects/transform";
 
 const UnitAngle = 180.0 / Math.PI;
 
-export function createCompStyle(
+export function createViewStyles(
   module: EditorModule,
-  layout: Layout,
-  comp: DesignComp
+  layout: Layout
+  // comp: DesignComp
 ) {
-  const { designToNaturalSize, pxToDesignSize, designSizeToPx } = module.helper;
+  const { designSizeToPx } = module.helper;
   const style: any = {};
-  const transform: any = {};
-
-  // if (layout.alignSelf) {
-  //   style.alignSelf = layout.alignSelf;
-  // }
-  if (layout.visible === false) {
-    style.display = "none";
-  }
-
-  if (layout.opacity !== undefined) {
-    style["opacity"] = layout.opacity;
-  }
-
   if (layout.border) {
     if (layout.border.style) {
       style["border-style"] = layout.border.style;
@@ -54,6 +41,35 @@ export function createCompStyle(
     style["overflow"] = "hidden";
   }
 
+  if (layout.background) {
+    if (layout.background.color) {
+      style.background = formatColor(layout.background.color);
+    }
+  }
+
+  return style;
+}
+
+export function createCompStyle(
+  module: EditorModule,
+  layout: Layout,
+  comp: DesignComp
+) {
+  const { designToNaturalSize } = module.helper;
+  const style: any = {};
+  // const transform: any = {};
+
+  // if (layout.alignSelf) {
+  //   style.alignSelf = layout.alignSelf;
+  // }
+  if (layout.visible === false) {
+    style.display = "none";
+  }
+
+  if (layout.opacity !== undefined) {
+    style["opacity"] = layout.opacity;
+  }
+
   if (layout.locked === true) {
     style["pointer-events"] = "none";
   }
@@ -101,7 +117,7 @@ export function createCompStyle(
       style.height = designToNaturalSize(h * t.scale.y, {
         adaptiveH: sizeOpts?.unit === "%",
       });
-  
+
       style.left = t.position.x + "px";
       style.top = t.position.y + "px";
       style.transform = `rotate(${t.rotation * UnitAngle}deg)`;
@@ -109,12 +125,6 @@ export function createCompStyle(
     }
   }
 
-
-  if (layout.background) {
-    if (layout.background.color) {
-      style.background = formatColor(layout.background.color);
-    }
-  }
   if (comp.compKey !== "Page") {
     style.position = "absolute";
   }