diff --git a/src/components/newLesson/share.vue b/src/components/newLesson/share.vue index 3304b3087cf138fce250f760e414035accacb9e6..d6052cca5c156a4f1752d9389a67abc74c75a5f0 100644 --- a/src/components/newLesson/share.vue +++ b/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> <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>