fix(skeleton): use TransitionGroup instead of Transition

b2nil · Dec 25, 2020 · e739dea · e739dea
1 parent 25e980a
commit e739dea
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/components/skeleton/index.ts b/src/components/skeleton/index.ts
@@ -4,7 +4,7 @@ import {
   VNode,
   PropType,
   computed,
-  Transition
+  TransitionGroup,
 } from "vue"
 
 import {
@@ -140,14 +140,23 @@ const AtSkeleton = defineComponent({
     }
 
     function genSkeleton() {
-      const children: any[] = []
+      let children: any[] = []
 
       if (!isLoading.value) children.push(slots.default?.())
       else children.push(genStructure())
 
       if (!props.transition) return children
 
-      return h(Transition, {
+      // children must be keyed when using TransitionGroup
+      children = children.map((child) => {
+        child.map((c, index) => {
+          c.key = index
+          return c
+        })
+        return child
+      })
+
+      return h(TransitionGroup, {
         onAfterEnter: resetStyles,
         onBeforeEnter: onBeforeEnter,
         onBeforeLeave: onBeforeLeave,

diff --git a/src/pages/advanced/skeleton/index.vue b/src/pages/advanced/skeleton/index.vue
@@ -7,6 +7,7 @@
       <example-item>
         <at-skeleton
           style="margin: 10px;"
+          transition=".3s ease"
           type="list-item-avatar, divider, list-item-three-line, card-heading, image, actions"
         >
         </at-skeleton>