增加抽奖结束时的结果动画，使中奖动画更自然

src/App.vue

@@ -19,6 +19,7 @@
         </li>
       </ul>
     </div>
+    <transition name="bounce">
       <div id="resbox" v-show="showRes">
         <p @click="showRes = false">{{ categoryName }}抽奖结果：</p>
         <span
@@ -31,6 +32,7 @@
           {{ item }}
         </span>
       </div>
+    </transition>
 
     <LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" />
     <Tool @toggle="toggle" @resetConfig="reloadTagCanvas" :running="running" />
@@ -61,7 +63,7 @@ export default {
 
   computed: {
     resCardStyle() {
-      const style = {};
+      const style = { fontSize: '30px' };
       const { number } = this.config;
       if (number < 100) {
         style.fontSize = '100px';
@@ -182,9 +184,7 @@ export default {
       if (this.running) {
         window.TagCanvas.SetSpeed('rootcanvas', speed());
         this.reloadTagCanvas();
-        setTimeout(() => {
         this.showRes = true;
-        }, 300);
       } else {
         this.showRes = false;
         const { number } = config;
@@ -257,6 +257,12 @@ export default {
     color: #ccc;
     font-size: 12px;
   }
+  .bounce-enter-active {
+    animation: bounce-in 1.5s;
+  }
+  .bounce-leave-active {
+    animation: bounce-in 0.2s reverse;
+  }
 }
 #main {
   height: 100%;
@@ -282,7 +288,6 @@ export default {
     border-radius: 4px;
     border: 1px solid #ccc;
     line-height: 160px;
-    font-size: 80px;
     font-weight: bold;
     margin-right: 20px;
     margin-top: 20px;

src/assets/style/animation.scss

@@ -16,3 +16,33 @@
     left: -400%;
   }
 }
+
+@-webkit-keyframes bounce-in {
+  0% {
+    -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
+    transform: translateX(-50%) translateY(-50%) scale(0);
+  }
+  50% {
+    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.5);
+    transform: translateX(-50%) translateY(-50%) scale(1.5);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
+    transform: translateX(-50%) translateY(-50%) scale(1);
+  }
+}
+
+@keyframes bounce-in {
+  0% {
+    -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
+    transform: translateX(-50%) translateY(-50%) scale(0);
+  }
+  50% {
+    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.5);
+    transform: translateX(-50%) translateY(-50%) scale(1.5);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
+    transform: translateX(-50%) translateY(-50%) scale(1);
+  }
+}