武汉大学抽奖

src/views/page/xhxcelshDraw.vue

@@ -35,11 +35,12 @@
       </div>
 
 
+      <transition name="fade">
         <div class="start-container" v-show="!start && !isResult">
           <div class="mask"></div>
           <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
             <div class="start-container__title">
-            三等奖{{ product.total }}名
+              {{ product.price_item }}{{ product.total }}名
             </div>
 
             <img class="start-container__shop" :src="product.image_file ? product.image_file.url : ''" alt="">
@@ -55,7 +56,9 @@
             <img class="start-container__start" src="~@/assets/xhxcelsh/btn-start.png" alt="" @click="startDraw">
           </div>
         </div>
+      </transition>
 
+      <transition name="fade">
         <div class="end-container" v-show="!start && isResult">
           <div class="mask"></div>
 
@@ -65,7 +68,7 @@
             </div>
 
             <div class="title">
-            三等奖{{ product.total }}名
+              {{ product.price_item }}{{ product.total }}名
             </div>
 
             <div class="result-users">
@@ -76,6 +79,7 @@
             </div>
           </div>
         </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -149,6 +153,7 @@ export default {
       this.avatars.forEach(item => {
         gsap.to(this.$refs[`column${item.key}`],{
           translateX: (this.columnIndex >= 19 && item.key < 19) ? ((19 - (this.columnIndex - 19) - 1) * 100 + '%') : ((this.columnIndex + 1) * -100 + '%'),
+          duration: 0.2,
           // rotateY: -9 + ((item.key)+1) + 'deg',
           // scale: item.key < 11 ? (0.82 + (item.key-1) * 0.02) : (1 - ((item.key-1) - 10) * 0.02)
           onComplete: () => {
@@ -174,7 +179,8 @@ export default {
       for(let i = 1;i <= 20;i++) {
         gsap.to(this.$refs[`column${(this.columnIndex+i)%(19*2)}`],{
           rotateY: -9 + ((i)+1) + 'deg',
-          scale: i < 10 ? (0.82 + i * 0.02) : (1 - (i - 10) * 0.02)
+          scale: i < 10 ? (0.82 + i * 0.02) : (1 - (i - 10) * 0.02),
+          duration: 0.2,
         })
       }
       this.columnIndex = (this.columnIndex+1) % (19*2)
@@ -200,7 +206,7 @@ export default {
     setTimer() {
       this.timer = setInterval(() => {
         this.animate()
-      },600)
+      },400)
     }
   },
   computed: {},
@@ -260,6 +266,7 @@ export default {
 
       .box {
         display: flex;
+        perspective: 1200px;
         justify-content: space-between;
         width: 100%;
         height: 100%;