liwei

src/components/star/starRank.vue

@@ -42,8 +42,8 @@
       :show-indicators="false"
       :touchable="true"
       :initial-swipe="tabIndex-1"
+      :duration="1000"
       class="scroll"
-      ref="demo"
       @change="swipeChange"
     >
       <van-swipe-item @click="swipeItemClick">
@@ -365,7 +365,6 @@ export default {
     },
     tabChange(index) {
       console.log(index);
-      console.log(this.$refs.demo);
       this.tabIndex = index;
       // if(index==2){
       //   setTimeout(() => {
@@ -461,6 +460,24 @@ export default {
     flex: 1;
     height: 64 * @toVw;
     line-height: 74 * @toVw;
+    // .demo {
+    //   display: inline-block;
+    //   width: 86 * @toVw;
+    //   height: 35 * @toVw;
+    //   line-height: 35 * @toVw;
+    //   position: relative;
+    //   text-shadow: 0px 1px 1px rgba(187, 82, 0, 1);
+    //   color: white;
+    //   font-size: 15 * @toVw;
+    //   animation: slideIn 0.5s linear;
+    //   img {
+    //     width: 86 * @toVw;
+    //     position: absolute;
+    //     top: 0;
+    //     left: 0;
+    //     z-index: -1;
+    //   }
+    // }
     .activity {
       display: inline-block;
       width: 86 * @toVw;
@@ -470,7 +487,7 @@ export default {
       text-shadow: 0px 1px 1px rgba(187, 82, 0, 1);
       color: white;
       font-size: 15 * @toVw;
-      transition: opacity 0.5s;
+      animation: slideOut 1s linear;
       img {
         width: 86 * @toVw;
         position: absolute;
@@ -481,6 +498,22 @@ export default {
     }
   }
 }
+@keyframes slideOut {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 .anActivity {
   margin-top: 24 * @toVw;
 }