animate restruct

packages/dooringx-lib/src/components/blocks.tsx

@@ -95,22 +95,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		props.data.fixed,
 	]);
 
-	const animatecss = useMemo(() => {
-		const animate = props.data.animate;
-		if (Object.keys(animate).length > 0) {
-			return `animate__animated ${animate.animate ?? ''} ${animate.delay ?? ''}  ${
-				animate.speed ?? ''
-			}`;
-		}
-		return '';
-	}, [props.data.animate]);
-	const animateCount = useMemo(() => {
-		const animate = props.data.animate;
-		if (Object.keys(animate).length > 0) {
-			return { animationIterationCount: animate.animationIterationCount };
-		}
-		return { animationIterationCount: '' };
-	}, [props.data.animate]);
+	console.log(props.data.animate);
 
 	const render = useMemo(() => {
 		// 如果是编辑模式下，则需要包裹不能选中层，位移层，缩放控制层，平面移动层。
@@ -141,20 +126,14 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 					}}
 				>
 					{/* 绝对定位元素 */}
-					{props.data.position !== 'static' && (
-						<div className={animatecss} style={{ ...style, ...animateCount }}>
-							{state}
-						</div>
-					)}
+					{props.data.position !== 'static' && <div style={{ ...style }}>{state}</div>}
 					{/* 静态定位 非行内 这里暂不考虑布局影响 */}
 					{props.data.position === 'static' && props.data.display !== 'inline' && (
 						<div
-							className={animatecss}
 							style={{
 								pointerEvents: 'none',
 								width: '100%',
 								height: '100%',
-								...animateCount,
 							}}
 						>
 							{state}
@@ -171,7 +150,6 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		} else {
 			return (
 				<div
-					className={animatecss}
 					style={{
 						position: props.data.fixed ? 'fixed' : props.data.position,
 						top: previewState.top,
@@ -181,7 +159,6 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						zIndex: props.data.zIndex,
 						display: props.data.display,
 						transform: `rotate(${props.data.rotate.value}deg)`,
-						...animateCount,
 					}}
 				>
 					{state}
@@ -195,8 +172,6 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		props.iframe,
 		props.config,
 		innerDragData,
-		animatecss,
-		animateCount,
 		previewState.top,
 		previewState.left,
 		previewState.width,

packages/dooringx-lib/src/core/components/createBlock.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-21 20:56:01
+ * @LastEditTime: 2021-08-06 10:24:32
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\createBlock.ts
  */
 import { IBlockType } from '../store/storetype';
@@ -28,7 +28,7 @@ export function createBlock(top: number, left: number, ComponentItem: ComponentI
 		canDrag: ComponentItem.initData.canDrag ?? true,
 		eventMap: ComponentItem.initData.eventMap || {},
 		functionList: ComponentItem.initData.functionList || [],
-		animate: ComponentItem.initData.animate || {},
+		animate: ComponentItem.initData.animate || [],
 		fixed: ComponentItem.initData.fixed || false,
 		rotate: ComponentItem.initData.rotate || {
 			value: 0,

packages/dooringx-lib/src/core/store/storetype.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-21 20:54:38
+ * @LastEditTime: 2021-08-06 21:27:19
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\store\storetype.ts
  */
 
@@ -19,6 +19,13 @@ export interface IStoreData {
 	globalState: Record<string, any>;
 	modalConfig: Record<string, any>;
 }
+export interface AnimateItem {
+	animationName: string;
+	animationDuration: string;
+	animationDelay: string;
+	animationIterationCount: string;
+	animationTimingFunction: string;
+}
 
 export interface IBlockType {
 	id: string;
@@ -41,13 +48,6 @@ export interface IBlockType {
 		value: number;
 		canRotate: boolean;
 	};
-	animate: {
-		animate?: string; //动画名
-		animationIterationCount?: number | string;
-		speed?: //动画速度
-		'animate__slow' | 'animate__slower' | 'animate__fast' | 'animate__faster' | '';
-		delay?: //首次延迟
-		'animate__delay-2s' | 'animate__delay-3s' | 'animate__delay-4s' | 'animate__delay-5s' | '';
-	};
+	animate: AnimateItem[];
 	fixed: boolean; // 用于制作fixed组件
 }

packages/dooringx-lib/src/core/storeChanger/index.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-04-05 14:55:31
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-27 16:50:09
+ * @LastEditTime: 2021-08-06 16:21:01
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\storeChanger\index.ts
  */
 
@@ -40,7 +40,7 @@ function createDefaultModalBlock(): IStoreData['block'] {
 			canDrag: false,
 			eventMap: {},
 			functionList: [],
-			animate: {},
+			animate: [],
 			fixed: true,
 			rotate: {
 				value: 0,