修改滤镜

src/templates/companyCulture/index.vue

@@ -100,22 +100,11 @@ export default {
   beforeDestroy() {},
   mounted() {
     Scene.EventBus.on("enterAfter", e => {
-      console.log(e, "enterAfter");
+      console.log(e, "enterAfter", this.$refs.child[0].$options.entering);
       if (this.sliderActiveIndex == e.page) {
         var aa = setTimeout(
           () => {
-
             this.$refs.child[0].leave();
-            setTimeout(() => {
-              var index = this.sliderActiveIndex;
-              console.log(this.sliderActiveIndex + 1 >= this.pages.length);
-              if (this.sliderActiveIndex + 1 >= this.pages.length) {
-                index = -1;
-              }
-              console.log(index);
-              this.swiper.slideTo(index + 1, 1000, false);
-              clearTimeout(aa)
-            }, 1500);
           },
           e.nextDuration ? e.nextDuration : 1000
         );
@@ -213,11 +202,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 .glob-container {
-  
+  background-color: red;
+  // filter: url("#goo");
 }
 </style>
 <style>
-
 .swiper-slide {
   /* width: 100% !important; */
 }

src/templates/companyCulture/pages/welcome.vue

@@ -25,7 +25,7 @@
         swiper-animate-duration="1s"
         swiper-animate-delay="0.5s"
       >{{getValue('welcomeWordEn')}}</div>
-      <div
+      <div ref="def"
         class="ani right-word"
         swiper-animate-effect="fadeInleft"
         swiper-animate-duration="1s"
@@ -38,7 +38,7 @@
       swiper-animate-duration="1s"
       swiper-animate-delay="1s"
     >
-      <div class="left-word">{{getValue('welcomeWordZh')}}</div>
+      <div ref="abc" class="left-word">{{getValue('welcomeWordZh')}}</div>
       <!-- <div class="right-word">{{getValue('welcomeWordZh').slice(10,20)}}</div> -->
     </div>
     <div class="time-info">
@@ -72,6 +72,20 @@ export default {
       }, countEnterTime);
     });
   },
+  entering() {
+    $.velocity(this.$refs['abc'],)
+    return new promise();
+  },
+  innerAnimationStart() {
+    sence.eventBus.emit('pageDone')
+
+  },
+  innerAnimationEnd(){
+    
+  },
+  leave(){
+
+  },
   destroyed() {
     clearTimeout(this.timer)
   },

src/templates/listingInformation/index.vue

 <template>
+  <div class>
     <swiper
       :options="swiperOption"
       :class="'glob-container'"
@@ -21,13 +22,25 @@
           :activeIndex="sliderActiveIndex"
         ></component>
       </swiper-slide>
-    <!-- <swiper-slide>
-      <div class="container">I'm Slide 2</div>
-    </swiper-slide>
-    <swiper-slide>
-      <div class="container">I'm Slide 3</div>
-    </swiper-slide>-->
     </swiper>
+    <svg viewBox="0 0 1920 1080" class="svg-filters">
+      <title>Animated clip-path SVG</title>
+      <defs>
+        <filter id="cd-image-1">
+          <clipPath id="cd-image-12">
+            <circle id="cd-circle-1" cx="110" cy="400" r="60" />
+          </clipPath>
+        </filter>
+      </defs>
+
+      <!-- <image
+        height="800px"
+        width="1400px"
+        clip-path="url(#cd-image-1)"
+        xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"
+      />-->
+    </svg>
+  </div>
 </template>
 
 <script>
@@ -89,7 +102,11 @@ export default {
     }
   },
   beforeDestroy() {},
-  mounted() {},
+  mounted() {
+    $(".glob-container").click(function() {
+      $(this).toggleClass("visible");
+    });
+  },
   created() {
     var vm = this;
     Message.init(e => {
@@ -180,8 +197,33 @@ export default {
 </script>
 <style lang="scss" scoped>
 .glob-container {
-  background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg") center no-repeat;
+  background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
+    center no-repeat;
   background-size: 100%;
+  clip: rect(0 0 0 0);
+  filter: url("#cd-image-12");
+  -webkit-filter: url("#cd-image-12");
+  .svg-filters {
+    position: absolute;
+    clip: rect(0 0 0 0);
+  }
+  #cd-image-1 circle {
+    animation: visible-clippath 1s ease-in-out forwards;
+    opacity: 0;
+  }
+}
+.svg-filters {
+  position: absolute;
+  clip: rect(0 0 0 0);
+}
+#cd-image-1 circle {
+  animation: visible-clippath 1s ease-in-out forwards;
+  opacity: 0;
+}
+@keyframes visible-clippath {
+  to {
+    r: 1364;
+  }
 }
 </style>
 <style>