add placeholder

overok · Aug 4, 2019 · 674b497 · 674b497
1 parent 8df1715
commit 674b497
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/docs/.vuepress/components/parabola/parabolaCss.vue b/docs/.vuepress/components/parabola/parabolaCss.vue
@@ -12,18 +12,29 @@
     top: calc(100% - 30px);
     --left: 0;
     --top: calc(100% - 30px);
-
     transition: left 0.5s ease-in, top 0.5s ease-out;
     &.active {
       left: var(--left);
       top: var(--top);
     }
   }
+  .placehloder{
+    position: absolute;
+    left:0;right:0;
+    top:0;bottom:0;
+    margin:auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 22px;
+    color:#ddd;
+  }
 }
 </style>
 
 <template>
   <div class="parabola-container" @click="containerClick">
+    <div class="placehloder">click panel to animate</div>
     <div class="parabola-item" ref="parabolaItem" :class="{active:isActive}"></div>
   </div>
 </template>

diff --git a/docs/.vuepress/components/parabola/parabolaJs.vue b/docs/.vuepress/components/parabola/parabolaJs.vue
@@ -19,11 +19,24 @@
     top: 0;
     background: #00adb5;
   }
+  .placehloder{
+    position: absolute;
+    left:0;right:0;
+    top:0;bottom:0;
+    margin:auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 22px;
+    color:#ddd;
+  }
 }
 </style>
 
 <template>
   <div class="parabola-container" @click="containerClick">
+    <div class="placehloder">click panel to animate</div>
+
     <div class="parabola-item" ref="parabolaItem"></div>
     <div class="click-point" ref="point"></div>
   </div>