dos

Public/static/css/index.css

@@ -96,4 +96,17 @@ input::-webkit-input-placeholder {
   background-size: 12.35rem 1.1rem;
   width: 12.35rem;
   height: auto;
+}
+
+.flag-text div {
+  width: 1.2rem;
+  height: 1.8rem;
+  display: inline-block;
+  animation: trans 2s 1s ease-in forwards;
+}
+
+@keyframes trans {
+  to {
+    transform: translateY(0);
+  }
 }
\ No newline at end of file

Public/static/js/common.js

@@ -98,7 +98,11 @@ function showFlagPage() {
     $('.page1').hide();
     $('.flag-page').show();
     $('.flag-page .choose-num').text(0);
-    randomFlag();
+    let flagArr = randomFlag();
+    for (let i = 0; i < flagArr.length; i++) {
+        fadeInTextUp(flag[flagArr[i]], 1000, '.flag' + (i + 1))
+    }
+
 }
 
 function randomFlag() {
@@ -107,6 +111,7 @@ function randomFlag() {
     for (let i = 0; i < flagArr.length; i++) {
         createItem(flag[flagArr[i]], i + 1);
     }
+    return flagArr;
 }
 
 function randomFlagArr(length) {
@@ -124,10 +129,26 @@ function createItem(flag, no) {
     let item = flagTemplate.clone();
     item.find('.flag-no').text(no);
     item.find('.flag-text').text(flag);
+    item.addClass('flag' + no);
     $('.flag-frame').append(item);
 }
 
-
+function fadeInTextUp(text, fadeTime, divName) {
+    //清空div
+    $(divName).text('');
+    //分割待处理的数组
+    let textArr = text.split('');
+    for (let i = 0; i < textArr.length; i++) {
+        //遍历数组添加到目标div中
+        $(divName).append($('<div class="fly' + i + '">' + textArr[i] + '</div>'));
+        //为每个文字设置初始位置并将opacity设置为0，执行fadeTime制定的fadein
+        $('.fly' + i).css('transform', 'translateY(' + RandomNumBoth(300, 500) + 'px)').fadeOut(0).fadeIn(fadeTime);
+    }
+    setTimeout(function () {
+        //待动画执行完毕后删除动画div，将文字合并
+        $(divName).text(text);
+    }, 3000);
+}
 
 function getTranslateDistance(cardinal = 0) {
     var wrapInnerTransform = $('.wrap-inner').css('transform');