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,90 +701,90 @@ export default {
   }
 };
 </script>
-<style scoped lang="less">
-@import "../../util/public";
-@tocurrentvw : 1/2 * @toVw;
-@tocurrentvh : 1/2 * @toVh;
-.test {
-  position: fixed;
-}
-.share_close {
-  position: fixed;
-  width: 20 * @toVw;
-  top: 26 * @toVw;
-  right: 14 * @toVw;
-  z-index: 1301;
-  color: white;
-  font-size: 16 * @toVw;
-}
-.imgMonkey {
+
+<style lang="less">
+  @import "../../util/public";
+  .imgMonkey {
     position: fixed;
     top: 482 * @toVw;
-  left: -60 * @toVw;
+    left: 22 * @toVw;
     z-index: 1301;
-  width: 55 * @toVw;
+    width: 56 * @toVw;
     pointer-events: none;
+    transform: translateX(-(22 + 56) * @toVw);
     @keyframes imgMonkey {
       from {
-      top: 482 * @toVw;
-      left: -60 * @toVw;
+        transform: translateX(-(22 + 56) * @toVw);
       }
       to {
-      top: 482 * @toVw;
-      left: 20 * @toVw;
+        transform: translateX(0);
       }
     }
-  
-}
-.monkeyAnimation{
- animation: imgMonkey 0.375s ease;
+  }
+  .monkeyAnimation{
+    animation: imgMonkey 0.4s ease-out;
+    /*animation: imgMonkey 0.4s cubic-bezier(0, 0, 0.29, 1.58);*/
     animation-fill-mode: forwards;
-}
-.imgTip {
+  }
+
+  .imgTip {
     position: fixed;
-  top: 452 * @toVw;
     left: 86 * @toVw;
+    width: 267 * @toVw;
+    top: 482 * @toVw;
     z-index: 1301;
-  width: 0;
     pointer-events: none;
+    transform: scale(0.01);
+    opacity: 0;
+    transform-origin: -11vw center;
+
     @keyframes imgTip {
       0% {
-      left: 66 * @toVw;
-      width: 0;
-      top: 452 * @toVw;
+        opacity: 0;
+        transform: scale(0.01);
       }
-    30%{
-      left: 86 * @toVw;
-      width: 267 * @toVw;
-      top: 482 * @toVw;
+      50%{
+        opacity: 1;
+        transform: scale(1) translateX(2vw);
       }
-    70%{
-      left: 86 * @toVw;
-      width: 267 * @toVw;
-      top: 482 * @toVw;
+      65%{
+        transform: translateX(-2vw);
       }
       80% {
-      left: 80 * @toVw;
-      width: 267 * @toVw;
-      top: 482 * @toVw;
+        transform: translateX(1vw);
       }
-    90% {
-       left: 90 * @toVw;
-       width: 267 * @toVw;
-       top: 482 * @toVw;
+      95% {
+        transform: translateX(-1vw);
       }
       100% {
-       left: 86 * @toVw;
-       width: 267 * @toVw;
-       top: 482 * @toVw;
+        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;
+@tocurrentvh : 1/2 * @toVh;
+.test {
+  position: fixed;
 }
-.tipAnimation{
- animation: imgTip 0.975s 0.375s ease;
- animation-fill-mode: forwards;
+.share_close {
+  position: fixed;
+  width: 20 * @toVw;
+  top: 26 * @toVw;
+  right: 14 * @toVw;
+  z-index: 1301;
+  color: white;
+  font-size: 16 * @toVw;
 }
+
 .share-btn {
   position: fixed;
   top: 510 * @toVw;