chore(demo): improve ExampleComponent

Akryum · Apr 28, 2019 · 707c439 · 707c439
1 parent 1a486f2
commit 707c439
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/docs-src/ExampleComponent.vue b/docs-src/ExampleComponent.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="example-component">
     <span>&lt;I'm a component!</span>
-    <button class="button" @click="count < 10 && count++">+</button>
-    <button class="button" @click="count > 0 && count--">-</button>
-    <span class="counter">
-			<span v-for="n in count" :key="n">{{ char }}</span>
-		</span>
+    <br>
+    <button v-if="count < 14" class="button" @click="count < 14 && count++">+</button>
+    <button v-if="count > 0" class="button" @click="count > 0 && count--">-</button>
+    <br>
+    <transition-group tag="span" class="counter">
+			<span v-for="n in count" :key="n" class="char">{{ char }}</span>
+		</transition-group>
 		<span>/&gt;</span>
   </div>
 </template>
@@ -45,4 +47,22 @@ export default {
 .counter {
 	font-weight: bold;
 }
+
+.char {
+  display: inline-block;
+  width: 32px;
+  text-align: center;
+  margin-top: 6px;
+  overflow: hidden;
+
+  &.v-enter-active,
+  &.v-leave-active {
+    transition: width .5s;
+  }
+
+  &.v-enter,
+  &.v-leave-to {
+    width: 0;
+  }
+}
 </style>
diff --git a/docs-src/PageHome.vue b/docs-src/PageHome.vue
@@ -164,7 +164,7 @@
               {{ msg }}
             </p>
 
-            <ExampleComponent char="=" />
+            <ExampleComponent char="✌️" />
 
             <div class="close">
               <a