feat: expose delayUntil prop, iterate on example

mattrothenberg · Nov 9, 2019 · acab245 · acab245
1 parent c4eded4
commit acab245
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -12,9 +12,6 @@
     "build-storybook": "build-storybook -s ./storybook-assets",
     "prepublishOnly": "npm run build"
   },
-  "dependencies": {
-    "flip-toolkit": "^7.0.6"
-  },
   "devDependencies": {
     "@babel/core": "^7.6.0",
     "@babel/preset-env": "^7.6.0",
@@ -36,5 +33,8 @@
     "vue-loader": "^15.7.0",
     "vue-router": "^3.0.3",
     "vue-template-compiler": "^2.6.10"
+  },
+  "dependencies": {
+    "flip-toolkit": "^7.0.6"
   }
 }
diff --git a/src/Flipped.vue b/src/Flipped.vue
@@ -5,6 +5,7 @@ export default {
   props: {
     flipId: String,
     inverseFlipId: String,
+    delayUntil: String,
     stagger: [String, Boolean],
     shouldFlip: Function,
     shouldInvert: Function,
@@ -26,6 +27,7 @@ export default {
       this.addFlippedElement({
         element: this.$el,
         flipId: this.flipId,
+        delayUntil: this.delayUntil,
         shouldFlip: this.shouldFlip,
         shouldInvert: this.shouldInvert,
         onStart: el => this.$emit("on-start", { el, id: this.flipId }),

diff --git a/src/Flipper.vue b/src/Flipper.vue
@@ -33,6 +33,7 @@ export default {
     addFlippedElement({
       element,
       flipId,
+      delayUntil,
       stagger,
       shouldFlip,
       shouldInvert,
@@ -45,6 +46,7 @@ export default {
       this.flipInstance.addFlipped({
         element,
         flipId,
+        ...(delayUntil ? { delayUntil } : undefined),
         ...(stagger ? { stagger } : undefined),
         ...(shouldFlip ? { shouldFlip } : undefined),
         ...(shouldInvert ? { shouldInvert } : undefined),

diff --git a/stories/Accordion.vue b/stories/Accordion.vue
@@ -1,12 +1,49 @@
 <template>
-  <Flipper :flipKey="focused" spring="gentle" :staggerConfig="staggerConfig">
+  <Flipper :flipKey="focused" :staggerConfig="staggerConfig">
     <div class="m-4">
       <div v-for="(num, index) in list" :key="index">
-        <Flipped :flipId="`card-${index}`" v-if="index !== focused" stagger="card">
-          <div @click="toggleItem(index)" role="button" class="bg-grey h-8 my-4"></div>
+        <Flipped
+          :shouldInvert="shouldFlip(index)"
+          :flipId="`card-${index}`"
+          v-if="index !== focused"
+          stagger="card"
+        >
+          <div
+            @click="toggleItem(index)"
+            role="button"
+            class="bg-grey h-8 my-4 flex items-center p-4"
+          >
+            <Flipped :inverseFlipId="`card-${index}`">
+              <div>
+                <Flipped
+                  :delayUntil="`card-${index}`"
+                  :shouldFlip="shouldFlip(index)"
+                  :flipId="`avatar-card-${index}`"
+                >
+                  <div class="bg-grey-dark rounded-full w-3 h-3"></div>
+                </Flipped>
+              </div>
+            </Flipped>
+          </div>
         </Flipped>
         <Flipped :flipId="`card-${index}`" v-else stagger="card">
-          <div @click="toggleItem(index)" role="button" class="bg-grey h-32 my-4"></div>
+          <div
+            @click="toggleItem(index)"
+            role="button"
+            class="bg-grey h-32 my-4 flex items-center justify-center p-4"
+          >
+            <Flipped :inverseFlipId="`card-${index}`">
+              <div>
+                <Flipped
+                  delayUntil="foo"
+                  :shouldFlip="shouldFlip(index)"
+                  :flipId="`avatar-card-${index}`"
+                >
+                  <div class="bg-grey-dark rounded-full w-12 h-12"></div>
+                </Flipped>
+              </div>
+            </Flipped>
+          </div>
         </Flipped>
       </div>
     </div>
@@ -26,11 +63,10 @@ export default {
   data() {
     return {
       focused: null,
-      list: Array(6)
+      list: Array(8)
         .fill()
         .map(() => ({
-          open: false,
-          description: ["a", "b", "c"]
+          open: false
         }))
     };
   },
@@ -60,7 +96,6 @@ export default {
       return {
         card: {
           reverse: this.focused === null,
-          // reverse: true,
           speed: 0.1
         }
       };