dos

Public/static/css/index.css

@@ -71,6 +71,12 @@ input::-webkit-input-placeholder {
   background: #c30101;
 }
 
+.red-line.animate {
+  transform-origin: 0%;
+  animation: scale 0.7s ease-in backwards;
+  -webkit-animation: scale 0.7s ease-in backwards;
+}
+
 .flag-page {
   z-index: 1;
 }
@@ -134,4 +140,14 @@ input[name=customize-flag] {
   to {
     transform: translateY(0);
   }
+}
+
+@keyframes scale {
+  0% {
+    transform: scaleX(0);
+  }
+
+  100% {
+    transform: scaleX(1);
+  }
 }
\ No newline at end of file

Public/static/js/common.js

@@ -122,14 +122,17 @@ function addFlag() {
 }
 
 function showFlagPage() {
-    $('.page1').fadeOut(500);
-    $('.flag-page').show();
-    $('.flag-page .choose-num').text(chooseNum);
-    let flagArr = randomFlag();
-    for (let i = 0; i < flagArr.length; i++) {
-        fadeInTextUp(flag[flagArr[i]], 1000, '.flag' + (i + 1))
-    }
-
+    $('.red-line').addClass('animate');
+    setTimeout(function () {
+        $('.red-line').removeClass('animate');
+        $('.page1').fadeOut(500);
+        $('.flag-page').show();
+        $('.flag-page .choose-num').text(chooseNum);
+        let flagArr = randomFlag();
+        for (let i = 0; i < flagArr.length; i++) {
+            fadeInTextUp(flag[flagArr[i]], 1000, '.flag' + (i + 1));
+        }
+    }, 700);
 }
 
 function changeFlag() {