diff --git a/packages/quark-react/src/type/index.ts b/packages/quark-react/src/type/index.ts
index a583a34b..f2f1d5a1 100644
--- a/packages/quark-react/src/type/index.ts
+++ b/packages/quark-react/src/type/index.ts
@@ -4,6 +4,8 @@ export interface baseInterface
     HTMLElement
   > {
   name?: string;
+  className?: string;
+  key?: string | number;
 }
 export type componentBaseInterface = Omit<
   baseInterface,
diff --git a/packages/quarkd/src/swipe/index.tsx b/packages/quarkd/src/swipe/index.tsx
index 8cfa3135..7f05f3bc 100644
--- a/packages/quarkd/src/swipe/index.tsx
+++ b/packages/quarkd/src/swipe/index.tsx
@@ -25,10 +25,12 @@ export interface CustomEvent {
 @customElement({ tag: "quark-swipe-item", style: swipeItemStyle })
 class QuarkSwipeItem extends QuarkElement {
   componentDidMount() {
-    const parentNode = this.parentNode as QuarkSwipe;
-    if (parentNode && parentNode.moveWidth) {
-      this.style.width = `${parentNode.moveWidth}px`;
-    }
+    requestAnimationFrame(() => {
+      const parentNode = this.parentNode as QuarkSwipe;
+      if (parentNode && parentNode.moveWidth) {
+        this.style.width = `${parentNode.moveWidth}px`;
+      }
+    });
   }
 
   render() {
@@ -91,11 +93,13 @@ class QuarkSwipe extends QuarkElement {
   timer: any = null;
 
   componentDidMount() {
-    const { offsetWidth } = this;
-    this.currentIndex = this.defaultindex;
-    this.moveWidth = offsetWidth;
-    const offset = this.getOffset();
-    this.swipeChild(offset, false);
+    requestAnimationFrame(() => {
+      const { offsetWidth } = this;
+      this.currentIndex = this.defaultindex;
+      this.moveWidth = offsetWidth;
+      const offset = this.getOffset();
+      this.swipeChild(offset, false);
+    });
   }
 
   componentWillUnmount() {