feat: 首页动画调整

src/jfw/modules/app/src/web/templates/active/yearEndReport/index.html

@@ -67,7 +67,7 @@
                         <div class="add-layer-group">
                             <img class="meteor-left" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P1/meteor.png">
                             <img class="meteor-mini" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P1/meteor-mini.png">
-                            <img class="meteor-bg" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P1/bottom-bg.png">
+                            <img animate-name="show"  class="meteor-bg" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P1/bottom-bg.png">
                         </div>
                         <img animate-name="up" animate-delay="900" class="jy-logo" src="https://www.jianyu360.cn/images/pc/logo.png" alt="">
                         <div class="next-page"></div>

src/web/staticres/common-module/yearEndReport/css/index.css

@@ -155,10 +155,21 @@ body {
   }
 }
 @keyframes InitMeteorBgIn {
-  from {
-    transform: scale(4) translate3d(0, -20%, 0) rotate3d(1, 1, 1, 20deg);
+  0% {
+    transform: scale(4) translate3d(0, 80%, 0) rotate3d(1, 1, 1, 30deg);
   }
-  to {
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes RightIn {
+  0% {
+    transform: rotate(8deg) scale(1.5) translateX(90%);
+  }
+  80% {
+    transform: rotate(4deg) scale(1.2) translateX(5%);
+  }
+  100% {
     transform: unset;
   }
 }
@@ -207,6 +218,14 @@ body {
     opacity: 1;
   }
 }
+@keyframes Scale {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.5);
+  }
+}
 @keyframes FadeBottomIn {
   from {
     transform: translateY(60%);
@@ -331,11 +350,13 @@ body {
   z-index: -99;
 }
 
+.page-1 .meteor-bg.show {
+  animation: InitMeteorBgIn 4s ease-out 1, Scale 10s 5s ease infinite alternate;
+}
 .page-1 .meteor-bg {
   position: absolute;
   bottom: 0;
   width: 100%;
-  animation: InitMeteorBgIn 1.2s ease-in;
 }
 
 .page-1 .meteor-mini {

src/web/staticres/common-module/yearEndReport/js/index.js

@@ -1,15 +1,17 @@
 function initSwiper() {
     var interleaveOffset = 0.5; //视差比值
 
-    function playAnOfIndex(index, type = true, delay = 0) {
+    function playAnOfIndex(index, type = true, delay) {
         setTimeout(function () {
             var tempNode = $('.swiper-container .slide-inner').eq(index).find('*[animate-name]')
             $(tempNode).each(function () {
                 var anName = $(this).attr('animate-name')
-                var anDelay = $(this).attr('animate-delay') || '200'
+                var anDelay = $(this).attr('animate-delay')
                 if (type) {
                     $(this).addClass(anName)
-                    $(this).css('animation-delay', anDelay + 'ms')
+                    if (anDelay) {
+                        $(this).css('animation-delay', anDelay + 'ms')
+                    }
                 } else {
                     tempNode.removeClass(anName)
                 }
@@ -197,6 +199,7 @@ var vPage = new Vue({
     },
     methods: {
         goResult: function () {
+            sessionStorage.setItem('yearEndReportResult', JSON.stringify(this.pageInfo))
             location.href = './yearEndReportResult'
         },
         getPageInfo: function () {

src/web/templates/active/yearEndReport/index.html

@@ -67,7 +67,7 @@
                         <div class="add-layer-group">
                             <img class="meteor-left" src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P1/meteor.png">
                             <img class="meteor-mini" src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P1/meteor-mini.png">
-                            <img class="meteor-bg" src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P1/bottom-bg.png">
+                            <img animate-name="show"  class="meteor-bg" src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P1/bottom-bg.png">
                         </div>
                         <img animate-name="up" animate-delay="900" class="jy-logo" src="https://www.jianyu360.cn/images/pc/logo.png" alt="">
                         <div class="next-page"></div>