Merge branch 'dev' of http://git.singsingenglish.com/new-sing/wechat into dev

src/components/newLesson/share.vue

@@ -96,8 +96,8 @@
       <div class="trs"></div>
     </div>
     <div class="borderDiv"></div>
-    <img :class="{imgMonkey:true,monkeyAnimation:animationBg}"  :src="img_monkey" />
-    <img :class="{imgTip:true,tipAnimation:animationBg}" :src="img_tip" />
+    <img :class="{imgMonkey:true, monkeyAnimation:animationBg}"  :src="img_monkey" />
+    <img :class="{imgTip:true, tipAnimation:animationBg}" :src="img_tip" />
     <!-- <div class="share-btn" @click="showShare()">
           <i class="iconfont icon-pengyouquan"></i>&nbsp;&nbsp;
           <span>保存图片·分享至朋友圈</span>
@@ -387,7 +387,7 @@ export default {
               .then(canvas => {
                 setTimeout(() => {
                   this.animationBg = true;
-                },1000)
+                },500)
                 let dataURL = canvas.toDataURL("image/jpg", 1.0);
                 this.canvasData = dataURL;
               })
@@ -701,6 +701,73 @@ export default {
   }
 };
 </script>
+
+<style lang="less">
+  @import "../../util/public";
+  .imgMonkey {
+    position: fixed;
+    top: 482 * @toVw;
+    left: 22 * @toVw;
+    z-index: 1301;
+    width: 56 * @toVw;
+    pointer-events: none;
+    transform: translateX(-(22 + 56) * @toVw);
+    @keyframes imgMonkey {
+      from {
+        transform: translateX(-(22 + 56) * @toVw);
+      }
+      to {
+        transform: translateX(0);
+      }
+    }
+  }
+  .monkeyAnimation{
+    animation: imgMonkey 0.4s ease-out;
+    /*animation: imgMonkey 0.4s cubic-bezier(0, 0, 0.29, 1.58);*/
+    animation-fill-mode: forwards;
+  }
+
+  .imgTip {
+    position: fixed;
+    left: 86 * @toVw;
+    width: 267 * @toVw;
+    top: 482 * @toVw;
+    z-index: 1301;
+    pointer-events: none;
+    transform: scale(0.01);
+    opacity: 0;
+    transform-origin: -11vw center;
+
+    @keyframes imgTip {
+      0% {
+        opacity: 0;
+        transform: scale(0.01);
+      }
+      50%{
+        opacity: 1;
+        transform: scale(1) translateX(2vw);
+      }
+      65%{
+        transform: translateX(-2vw);
+      }
+      80% {
+        transform: translateX(1vw);
+      }
+      95% {
+        transform: translateX(-1vw);
+      }
+      100% {
+        opacity: 1;
+        transform: none;
+      }
+    }
+  }
+  .tipAnimation{
+    animation: imgTip 1.1s 0.55s ease-out;
+    animation-fill-mode: forwards;
+  }
+</style>
+
 <style scoped lang="less">
 @import "../../util/public";
 @tocurrentvw : 1/2 * @toVw;
@@ -717,74 +784,7 @@ export default {
   color: white;
   font-size: 16 * @toVw;
 }
-.imgMonkey {
-  position: fixed;
-  top: 482 * @toVw;
-  left: -60 * @toVw;
-  z-index: 1301;
-  width: 55 * @toVw;
-  pointer-events: none;
-  @keyframes imgMonkey {
-    from {
-      top: 482 * @toVw;
-      left: -60 * @toVw;
-    }
-    to {
-      top: 482 * @toVw;
-      left: 20 * @toVw;
-    }
-  }
-  
-}
-.monkeyAnimation{
- animation: imgMonkey 0.375s ease;
- animation-fill-mode: forwards;
-}
-.imgTip {
-  position: fixed;
-  top: 452 * @toVw;
-  left: 86 * @toVw;
-  z-index: 1301;
-  width: 0;
-  pointer-events: none;
-  @keyframes imgTip {
-    0% {
-      left: 66 * @toVw;
-      width: 0;
-      top: 452 * @toVw;
-    }
-    30%{
-      left: 86 * @toVw;
-      width: 267 * @toVw;
-      top: 482 * @toVw;
-    }
-    70%{
-      left: 86 * @toVw;
-      width: 267 * @toVw;
-      top: 482 * @toVw;
-    }
-    80% {
-      left: 80 * @toVw;
-      width: 267 * @toVw;
-      top: 482 * @toVw;
-    }
-    90% {
-       left: 90 * @toVw;
-       width: 267 * @toVw;
-       top: 482 * @toVw;
-    }
-    100% {
-       left: 86 * @toVw;
-       width: 267 * @toVw;
-       top: 482 * @toVw;
-    }
-  }
-  animation-fill-mode: forwards;
-}
-.tipAnimation{
- animation: imgTip 0.975s 0.375s ease;
- animation-fill-mode: forwards;
-}
+
 .share-btn {
   position: fixed;
   top: 510 * @toVw;
@@ -1217,4 +1217,4 @@ export default {
 /* body{
   pointer-events: none;
 }  */
-</style>
\ No newline at end of file
+</style>