feat:头像动画改动

src/components/avatorSwiper.vue

 <template>
   <div class="avator-swiper">
-    <div v-if="isLoop" ref="refLeft" :class="{ 'ani-left': isAddClass }" class="avator-swiper_left">
-      <cr-image class="avator-swiper_small" :src="leftImgPath" />
+    <div v-if="isLoop" class="avator_left avator-swiper_item" :class="{ 'ani-left': isAddClass }">
+      <img :src="leftImgPath" />
     </div>
     <swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
       <swiper-slide
@@ -10,20 +10,14 @@
         :data-src="item"
         :data-name="item"
         class="avator-swiper_item"
-        @set-translate="setTranslate"
       >
         <div class="avator-swiper_item">
           <img :src="item | Img2Thumb" />
         </div>
       </swiper-slide>
     </swiper>
-    <div
-      v-if="isLoop"
-      ref="refRight"
-      :class="{ 'ani-right': isAddClass }"
-      class="avator-swiper_right"
-    >
-      <cr-image class="avator-swiper_small" :src="rightImgPath" />
+    <div v-if="isLoop" class="avator_right avator-swiper_item" :class="{ 'ani-right': isAddClass }">
+      <img :src="rightImgPath" />
     </div>
   </div>
 </template>
@@ -53,6 +47,7 @@ export default {
     const isLoop = vm.avatorData.length < 9 ? false : true;
     const autoplay = isLoop ? { delay: 5000 } : false;
     return {
+      timer: null,
       isLoop,
       isAddClass: false,
       rightImgPath: '',
@@ -62,12 +57,15 @@ export default {
         initialSlide: 0,
         slidesPerView: 9,
         spaceBetween: 4,
-        speed: 900,
-        centeredSlides: isLoop,
+        speed: 600,
+        centeredSlides: true,
         watchSlidesProgress: false,
         allowTouchMove: false,
         autoplay,
         on: {
+          slideChangeTransitionStart: function() {
+            vm.$store.dispatch('goods_avator_info', { showInfo: false });
+          },
           transitionStart: function() {
             const activeIndex = this.activeIndex;
             const slideLeft = this.slides.eq(activeIndex - 5);
@@ -78,10 +76,13 @@ export default {
             slideRight.addClass('ani-opt');
             slideLeft.addClass('ani-opt');
             vm.isAddClass = true;
-            vm.$store.dispatch('goods_avator_info', { showInfo: false });
+            clearTimeout(vm.timer);
+            vm.timer = setTimeout(() => {
+              vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true });
+              clearTimeout(vm.timer);
+            }, 800);
           },
           transitionEnd: function() {
-            vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true });
             vm.isAddClass = false;
             for (let i = 0; i < this.slides.length; i++) {
               let slide = this.slides.eq(i);
@@ -98,14 +99,14 @@ export default {
     }
   },
   methods: {
-    setTranslate() {
-      const slides = this.swiper.slides;
-      for (let i = 0; i < slides.length; i++) {
-        const slide = slides.eq(i);
-        const progress = slides[i].progress;
-        slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
-      }
-    },
+    // setTranslate() {
+    //   const slides = this.swiper.slides;
+    //   for (let i = 0; i < slides.length; i++) {
+    //     const slide = slides.eq(i);
+    //     const progress = slides[i].progress;
+    //     slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
+    //   }
+    // },
     getAvatorItem(ele) {
       return {
         src: ele.data('src'),
@@ -119,75 +120,87 @@ export default {
 @keyframes bigToSamll {
   from {
     transform: scale(1);
+    opacity: 1;
   }
   to {
-    transform: scale(0);
+    transform: scale(0.3);
+    opacity: 0;
   }
 }
 @keyframes samllToBig {
   from {
-    transform: scale(0);
+    transform: scale(0.3);
+    opacity: 0;
   }
   to {
     transform: scale(1);
+    opacity: 1;
   }
 }
 .ani-left {
   transform-origin: center;
-  animation: bigToSamll 1s linear;
-  animation-fill-mode: forwards;
+  animation: bigToSamll 0.6s linear;
 }
 .ani-right {
   transform-origin: center;
-  animation: samllToBig 1s linear;
-  animation-fill-mode: forwards;
+  animation: samllToBig 0.6s linear;
 }
 .ani-opt {
   opacity: 0;
 }
-@keyframes scaleTo {
-  to {
-    opacity: 1;
-  }
+.avator_left,
+.avator_right {
+  backface-visibility: hidden;
+  perspective: 1000;
+  position: absolute;
+  top: 0;
+}
+.avator_right {
+  right: 0;
+}
+.avator_left {
+  left: 0;
 }
 
 .avator-swiper {
   position: relative;
   width: 100%;
-  margin: 0 auto !important;
 
   &_item {
-    transition: transform 0.2s linear;
     height: 32px;
-    padding-top: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // transform: scale(1);
+    // transition: transform 0 0.2s linear;
     img {
       height: 25px;
       width: 25px;
       border-radius: 50%;
     }
-    &.active {
-      transform: scale(1.2);
-    }
   }
 }
-.avator-swiper_left,
-.avator-swiper_right {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  top: 50%;
-  margin-top: -9px;
-  border-radius: 50%;
-  overflow: hidden;
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-.avator-swiper_left {
-  left: 3.5px;
+
+.swiper-slide {
+  text-align: center;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
 }
-.avator-swiper_right {
-  right: 3.5px;
+
+.swiper-slide-active {
+  transform: scale(1.2);
+  transition: transform 0.6s linear;
 }
 </style>

src/components/groupSwiper.vue

@@ -155,7 +155,6 @@ export default {
   position: absolute;
   top: 0;
   right: -2px;
-  background-color: #000;
   z-index: 2;
 }
 .avator-swiper {

src/views/goodsList/index.vue

@@ -122,18 +122,21 @@ export default {
     }
   },
   watch: {
-    $route(to) {
-      if (to.name !== 'groupBuyList') {
-        this.setTitleColor();
-        return;
-      }
-      this.setTitleColor(this.goodsTemp.bgcolor);
-    }
+    // $route(to) {
+    //   if (to.name !== 'groupBuyList') {
+    //     this.setTitleColor();
+    //     return;
+    //   }
+    //   this.setTitleColor(this.goodsTemp.bgcolor);
+    // }
   },
   created() {
     this.showLoops = true;
     this.reload = true;
   },
+  beforeDestroy() {
+    this.setTitleColor();
+  },
   // deactivated() {
   //   this.showLoops = false;
   // },