anime

package.json

@@ -14,11 +14,12 @@
     "build": "node build/build.js"
     "build": "node build/build.js"
   },
   },
   "dependencies": {
   "dependencies": {
+    "animejs": "^3.1.0",
     "axios": "^0.18.0",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
     "babel-runtime": "^6.26.0",
-    "svg-sprite-loader": "^4.1.6",
     "node-sass": "^4.9.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "sass-loader": "^7.0.1",
+    "svg-sprite-loader": "^4.1.6",
     "swiper": "^4.5.0",
     "swiper": "^4.5.0",
     "vue": "^2.5.2",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^3.1.3",
     "vue-awesome-swiper": "^3.1.3",

src/templates/listingInformation/index.vue

 <template>
 <template>
   <div class>
   <div class>
-    <swiper :options="swiperOption"
-            :class="'glob-container'"
-            ref="mySwiper"
-            @someSwiperEvent="callback"
-            style="width:1920px;height:1080px;">
-      <swiper-slide style="transform: translate3d(0,0,0)"
-                    class="ani ant"
-                    v-for="(page, index) in pages"
-                    :key="index">
-        <component :is="page.component"
-                   :schemaData="pages[index].schemaData"
-                   :isEditMode="isEditMode"
-                   :cancelEdit.sync="cancelEdit"
-                   :page="index"
-                   :activeIndex="sliderActiveIndex"></component>
+    <swiper
+      :options="swiperOption"
+      :class="'glob-container'"
+      ref="mySwiper"
+      @someSwiperEvent="callback"
+      style="width:1920px;height:1080px;"
+    >
+      <swiper-slide
+        style="transform: translate3d(0,0,0)"
+        class="ani"
+        v-for="(page, index) in pages"
+        :key="index"
+      >
+        <component
+          :is="page.component"
+          v-if="index === sliderActiveIndex"
+          :schemaData="pages[index].schemaData"
+          :isEditMode="isEditMode"
+          :cancelEdit.sync="cancelEdit"
+          :page="index"
+          :activeIndex="sliderActiveIndex"
+        ></component>
       </swiper-slide>
       </swiper-slide>
     </swiper>
     </swiper>
-    <svg viewBox="0 0 1920 1080"
-         class="svg-filters">
+    <svg viewBox="0 0 1920 1080" class="svg-filters">
       <title>Animated clip-path SVG</title>
       <title>Animated clip-path SVG</title>
       <defs>
       <defs>
-        <filter id="ant"
-                x="0"
-                y="0"
-                width="1"
-                height="1">
-          <feGaussianBlur in="SourceGraphic"
-                          stdDeviation="10" />
+        <filter id="ant" x="0" y="0" width="1" height="1">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
 
 
           <clipPath id="cd-image-122">
           <clipPath id="cd-image-122">
-            <circle id="cd-circle-1"
-                    cx="110"
-                    cy="400"
-                    r="60"></circle>
+            <circle id="cd-circle-1" cx="1920" cy="1080" r="1920" />
           </clipPath>
           </clipPath>
         </filter>
         </filter>
-        <clipPath id="cd-image-1">
-          <circle id="cd-circle-1"
-                  cx="0"
-                  cy="0"
-                  r="60"></circle>
+        <clipPath id="cd-image-1" clipPathUnits="userSpaceOnUse">
+          <circle id="cd-circle-1" cx="0" cy="1080" r="2920" />
         </clipPath>
         </clipPath>
+        <mask id="mask-img-1" maskContentUnits="objectBoundingBox">
+          <circle id="cd-circle-1" fill="white" cx="0" cy="0" r="1000" />
+        </mask>
       </defs>
       </defs>
 
 
-      <!-- <image height="800px"
+      <image height="800px"
              width="1400px"
              width="1400px"
              clip-path="url(#cd-image-1)"
              clip-path="url(#cd-image-1)"
-             xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image> -->
+             mask="mask-img-1"
+      xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image>
     </svg>
     </svg>
   </div>
   </div>
 </template>
 </template>
@@ -217,8 +216,13 @@ export default {
     opacity: 0;
     opacity: 0;
   }
   }
   .ant {
   .ant {
-      clip-path: url(#cd-image-1);
-      // clip-path: circle(30%);
+    // clip-path: url(#cd-image-1);
+    // clip-path: circle(30%);
+    mask-image: url(#mask-img-1);
+    // mask-size:10%;
+    mask-type:alpha;
+    // mask-clip: view-box;
+
   }
   }
 }
 }
 
 
@@ -226,16 +230,26 @@ export default {
   position: absolute;
   position: absolute;
   top: 0;
   top: 0;
   left: 0;
   left: 0;
+  width: 0;
+  height: 0;
 }
 }
 #cd-image-1 circle {
 #cd-image-1 circle {
-  animation: visible-clippath 3s ease-in-out forwards infinite;
-  opacity: 0;
+  // animation: visible-clippath 1s ease-out forwards ;
+  opacity: 1;
+}
+#mask-img-1 circle {
+  // animation: visible-clippath 1s ease-out forwards ;
+  opacity: 1;
 }
 }
 @keyframes visible-clippath {
 @keyframes visible-clippath {
-  to {
+  from {
     r: 1920;
     r: 1920;
     opacity: 1;
     opacity: 1;
   }
   }
+  to {
+    r: 0;
+    opacity: 1;
+  }
 }
 }
 </style>
 </style>
 <style>
 <style>

src/templates/listingInformation/pages/rentHouse3.vue

 <template>
 <template>
   <!-- animated bgliner -->
   <!-- animated bgliner -->
-  <div class="container infinite">
+  <div class="container" :class="'ant'" @click="reLeave">
     <!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
     <!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
     <div class="title">{{getValue('companyName')}}</div>-->
     <div class="title">{{getValue('companyName')}}</div>-->
     <div class="decoration"></div>
     <div class="decoration"></div>
-    <div class="house-list">
-      <swiper :options="swiperOption"
-              ref="mySwiper"
-              style=" width:731px;height:1080px;">
-        <swiper-slide style="transform: translate3d(0,0,0)"
-                      v-for="(item, index) in dataList"
-                      :key="index">
-          <img :src="item"
-               alt />
+    <div class="house-list" ref="house-list">
+      <swiper :options="swiperOption" ref="mySwiper" style=" width:731px;height:1080px;">
+        <swiper-slide
+          style="transform: translate3d(0,0,0)"
+          v-for="(item, index) in dataList"
+          :key="index"
+        >
+          <img :src="item" alt />
         </swiper-slide>
         </swiper-slide>
       </swiper>
       </swiper>
     </div>
     </div>
     <div class="right-container">
     <div class="right-container">
       <div class="center-v">
       <div class="center-v">
-        <div class="title">合租 | 彩虹新城·两居室·精装修·南</div>
-        <div class="price">
+        <div class="title" ref="title">合租 | 彩虹新城·两居室·精装修·南</div>
+        <div class="price" ref="price">
           ¥
           ¥
           <span class="number">2100</span>
           <span class="number">2100</span>
           <span class="uint">/月</span>
           <span class="uint">/月</span>
           <div class="mirror-light"></div>
           <div class="mirror-light"></div>
         </div>
         </div>
 
 
-        <div class="surrounding"
-             zh="周边设施">SURROUNDING FACILITIES</div>
-        <div class="feature-list">
+        <div class="surrounding" ref="surrounding" zh="周边设施">SURROUNDING FACILITIES</div>
+        <div class="feature-list" ref="feature-list">
           <div class="feature-item">
           <div class="feature-item">
-            <img class="icon"
-                 src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
-                 alt />
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
+              alt
+            />
             地铁四号线枣园站 260米
             地铁四号线枣园站 260米
           </div>
           </div>
           <div class="feature-item feature-item-right">
           <div class="feature-item feature-item-right">
-            <img class="icon"
-                 src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
-                 alt />
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
+              alt
+            />
             地铁四号线枣园站 260米
             地铁四号线枣园站 260米
           </div>
           </div>
           <div class="feature-item">
           <div class="feature-item">
-            <img class="icon"
-                 src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
-                 alt />
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
+              alt
+            />
             地铁四号线枣园站 260米
             地铁四号线枣园站 260米
           </div>
           </div>
           <div class="feature-item feature-item-right">
           <div class="feature-item feature-item-right">
-            <img class="icon"
-                 src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
-                 alt />
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
+              alt
+            />
             地铁四号线枣园站 260米
             地铁四号线枣园站 260米
           </div>
           </div>
         </div>
         </div>
         <div class="high-light">
         <div class="high-light">
-          <div class="high-light-item">
+          <div class="high-light-item" ref="high-light-item">
             <div class="high-light-item-top">20m²</div>
             <div class="high-light-item-top">20m²</div>
             <div class="high-light-item-bottom">面积</div>
             <div class="high-light-item-bottom">面积</div>
           </div>
           </div>
-          <div class="high-light-item">
+          <div class="high-light-item" ref="high-light-item">
             <div class="high-light-item-top">阳台</div>
             <div class="high-light-item-top">阳台</div>
             <div class="high-light-item-bottom">面积</div>
             <div class="high-light-item-bottom">面积</div>
           </div>
           </div>
-          <div class="high-light-item">
+          <div class="high-light-item" ref="high-light-item">
             <div class="high-light-item-top">3/10</div>
             <div class="high-light-item-top">3/10</div>
             <div class="high-light-item-bottom">楼层</div>
             <div class="high-light-item-bottom">楼层</div>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
-
     </div>
     </div>
-
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import methods from "../methods";
 import methods from "../methods";
+import Scene from "@/framework/utils/sence";
+import anime from "animejs/lib/anime.es.js";
 export default {
 export default {
   name: "welcome",
   name: "welcome",
   props: ["schemaData", "page", "isEditMode", "cancelEdit"],
   props: ["schemaData", "page", "isEditMode", "cancelEdit"],
@@ -88,8 +94,176 @@ export default {
   },
   },
   created() {
   created() {
     // console.log(this.list);
     // console.log(this.list);
+    window.test = this;
+  },
+  methods: {
+    reLeave() {
+      this.leave();
+    },
+    leave() {
+      console.log("leave");
+      // anime({
+      //   targets: "#cd-image-1 circle",
+      //   duration: 3000,
+      //   r: [2920, 0],
+      //   easing: "linear"
+      // });
+      var PromiseAll = [
+        anime({
+          targets: "#cd-image-1 circle",
+          duration: 2000,
+          r: [2920, 0],
+          easing: "easeOutQuad"
+        }),
+        anime({
+          targets: "#mask-img-1 circle",
+          duration: 2000,
+          r: [2920, 0],
+          easing: "easeOutQuad"
+        })
+      ];
+      return Promise.all(PromiseAll);
+    },
+    enter() {
+      var PromiseAll = [
+        anime({
+          targets: this.$refs["house-list"],
+          translateX: 0,
+          opcity: 1,
+          duration: 1000
+        }),
+        anime({
+          targets: this.$refs["title"],
+          translateX: 0,
+          opcity: 1,
+          delay: 1000,
+          duration: 500,
+          easing: "easeInOutQuad"
+        }),
+        anime({
+          targets: this.$refs["price"],
+          translateX: 0,
+          opcity: 1,
+          duration: 1000,
+          delay: 1200,
+          easing: "easeInOutQuad"
+        }),
+        anime({
+          targets: this.$refs["surrounding"],
+          translateX: 0,
+          opcity: 1,
+          duration: 1000,
+          delay: 1500,
+          easing: "easeInOutQuad"
+        }),
+        anime({
+          targets: this.$refs["feature-list"],
+          translateX: 0,
+          opcity: 1,
+          duration: 1000,
+          delay: 1800,
+          easing: "easeInOutQuad"
+        }),
+        anime({
+          targets: ".high-light-item",
+          translateY: 0,
+          opcity: 1,
+          duration: 1000,
+
+          // delay: anime.stagger(1000),
+          delay: 2000,
+          easing: "easeInOutQuad"
+        })
+      ];
+
+      return Promise.all(PromiseAll);
+    },
+    enterBefore() {
+      var els = [
+        ".house-list",
+        ".center-v .title",
+        ".price",
+        ".surrounding",
+        ".feature-list",
+        ".high-light .high-light-item"
+      ];
+      anime({
+        targets: "#cd-image-1 circle",
+        duration: 0,
+        r: [0, 2920]
+      });
+      anime({
+        targets: this.$refs["house-list"],
+        translateX: -1000,
+        opcity: 0,
+        duration: 0
+      });
+      anime({
+        targets: this.$refs["title"],
+        translateX: 2000,
+        opcity: 0,
+        duration: 0
+      });
+      anime({
+        targets: this.$refs["price"],
+        translateX: 2000,
+        opcity: 0,
+        duration: 0
+      });
+      anime({
+        targets: this.$refs["surrounding"],
+        translateX: 2000,
+        opcity: 0,
+        duration: 0
+      });
+      anime({
+        targets: this.$refs["feature-list"],
+        translateX: 2000,
+        opcity: 0,
+        duration: 0
+      });
+      anime({
+        targets: ".high-light-item",
+        translateY: 1000,
+        opcity: 0,
+        duration: 0
+      });
+      setTimeout(() => {
+        this.enter();
+      }, 1000);
+      // anime.set(els[1], {
+      //   translateX: () => 1000,
+      //   opcity: () => 0
+      // })
+      // anime.set(els[2], {
+      //   translateX: () => 1000,
+      //   opcity: () => 0
+      // })
+      // anime.set(els[3], {
+      //   translateX: () => 1000,
+      //   opcity: () => 0
+      // })
+      // anime.set(els[4], {
+      //   translateX: () => 1000,
+      //   opcity: () => 0
+      // })
+      // anime.set(els[0], {
+      //   translateX: -1000
+      // })
+      // anime.set(els[0], {
+      //   translateX: -1000
+      // })
+    },
+    enterAfter() {
+      this.timer = setTimeout(() => {
+        Scene.leaveBefore();
+        clearTimeout(this.timer);
+      }, 10000);
+    }
+  },
+  mounted() {
+    this.enterBefore();
   },
   },
-  mounted() {},
   data() {
   data() {
     return {
     return {
       currentIndex: "",
       currentIndex: "",
@@ -100,13 +274,14 @@ export default {
       ],
       ],
 
 
       swiperOption: {
       swiperOption: {
-        effect: "slider",
+        effect: "fade",
         speed: 1000,
         speed: 1000,
         loop: true,
         loop: true,
         autoplay: {
         autoplay: {
           delay: 5000
           delay: 5000
         }
         }
-      }
+      },
+      isLeave: false
     };
     };
   }
   }
 };
 };
@@ -214,7 +389,7 @@ export default {
     .title {
     .title {
       font-size: 66px;
       font-size: 66px;
       line-height: 87px;
       line-height: 87px;
-      color: rgba(51,51,51,0.8);
+      color: rgba(51, 51, 51, 0.8);
       font-weight: bold;
       font-weight: bold;
       letter-spacing: 0px;
       letter-spacing: 0px;
     }
     }