|
|
@@ -1,14 +1,16 @@
|
|
|
import { IconAdd, IconMove } from "@/assets/icons";
|
|
|
import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
|
|
|
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
|
|
|
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
|
|
|
import { css, cx } from "@linaria/core";
|
|
|
import { IconDelete } from "@queenjs/icons";
|
|
|
-import { defineComponent, onMounted, ref } from "vue";
|
|
|
-import { string, bool } from "vue-types";
|
|
|
+import "animate.css";
|
|
|
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
|
|
|
+import { bool, string } from "vue-types";
|
|
|
import { useEditor } from "../../..";
|
|
|
-import { useCompRef, useCompEditLayerRef } from "./hooks";
|
|
|
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
|
|
|
-import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
|
|
|
+import { useCompEditLayerRef, useCompRef } from "./hooks";
|
|
|
|
|
|
+let intersectionObserver: any;
|
|
|
export const View = defineComponent({
|
|
|
props: {
|
|
|
compId: string().isRequired,
|
|
|
@@ -23,6 +25,28 @@ export const View = defineComponent({
|
|
|
? useCompEditLayerRef(props.compId)
|
|
|
: ref();
|
|
|
|
|
|
+ const isLongPage = controls.screenCtrl.isLongPage;
|
|
|
+
|
|
|
+ const state = reactive({
|
|
|
+ showAnimation: false,
|
|
|
+ });
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ intersectionObserver.disconnect();
|
|
|
+ });
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ intersectionObserver = new IntersectionObserver((entries) => {
|
|
|
+ if (entries[0].intersectionRatio <= 0) {
|
|
|
+ if (isLongPage) return;
|
|
|
+ state.showAnimation = false;
|
|
|
+ } else {
|
|
|
+ state.showAnimation = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ intersectionObserver.observe(compRef.value);
|
|
|
+ });
|
|
|
+
|
|
|
return () => {
|
|
|
const comp = helper.findComp(props.compId);
|
|
|
if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
|
|
|
@@ -53,8 +77,17 @@ export const View = defineComponent({
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- if (comp.anim && comp.anim.transition) {
|
|
|
- style.transition = "all 1s ease-out";
|
|
|
+ // if (comp.anim && comp.anim.transition) {
|
|
|
+ // style.transition = "all 1s ease-out";
|
|
|
+ // }
|
|
|
+
|
|
|
+ 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`;
|
|
|
}
|
|
|
|
|
|
function RenderPre() {
|
|
|
@@ -122,8 +155,6 @@ export const View = defineComponent({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- const isLongPage = controls.screenCtrl.isLongPage
|
|
|
-
|
|
|
return (
|
|
|
<div
|
|
|
ref={compRef}
|
|
|
@@ -146,6 +177,9 @@ export const View = defineComponent({
|
|
|
onDblclick={() => emit("dblclick")}
|
|
|
>
|
|
|
<div
|
|
|
+ class={cx(
|
|
|
+ comp.layout.anim ? (aniStyles ? aniStyles : "opacity-0") : ""
|
|
|
+ )}
|
|
|
onMousemove={(e) => {
|
|
|
if (
|
|
|
!store.isEditMode ||
|
