fix: login animation

web/html/login.html

@@ -108,17 +108,11 @@
     el: '#app',
     data: {
       themeSwitcher,
-      loadingStates: {
+      loadingStates: { fetched: false, spinning: false },
-        fetched: false,
+      user: { username: "", password: "", twoFactorCode: "" },
-        spinning: false
-      },
-      user: {
-        username: "",
-        password: "",
-        twoFactorCode: ""
-      },
       twoFactorEnable: false,
-      lang: ""
+      lang: "",
+      animationStarted: false
     },
     async mounted() {
       this.lang = LanguageManager.getLanguage();
@@ -127,65 +121,52 @@
     methods: {
       async login() {
         this.loadingStates.spinning = true;
-
         const msg = await HttpUtil.post('/login', this.user);
-
         if (msg.success) {
           location.href = basePath + 'panel/';
         }
-
         this.loadingStates.spinning = false;
       },
       async getTwoFactorEnable() {
         const msg = await HttpUtil.post('/getTwoFactorEnable');
-
         if (msg.success) {
           this.twoFactorEnable = msg.obj;
           this.loadingStates.fetched = true;
-
+          this.$nextTick(() => {
+            if (!this.animationStarted) {
+              this.animationStarted = true;
+              this.initHeadline();
+            }
+          });
           return msg.obj;
         }
       },
+      initHeadline() {
+        const animationDelay = 2000;
+        const headlines = this.$el.querySelectorAll('.headline');
+        headlines.forEach((headline) => {
+          const first = headline.querySelector('.is-visible');
+          if (!first) return;
+          setTimeout(() => this.hideWord(first, animationDelay), animationDelay);
+        });
+      },
+      hideWord(word, delay) {
+        const nextWord = this.takeNext(word);
+        this.switchWord(word, nextWord);
+        setTimeout(() => this.hideWord(nextWord, delay), delay);
+      },
+      takeNext(word) {
+        return word.nextElementSibling || word.parentElement.firstElementChild;
+      },
+      switchWord(oldWord, newWord) {
+        oldWord.classList.remove('is-visible');
+        oldWord.classList.add('is-hidden');
+        newWord.classList.remove('is-hidden');
+        newWord.classList.add('is-visible');
+      }
     },
   });
 
-  document.addEventListener("DOMContentLoaded", function () {
-    var animationDelay = 2000;
-    initHeadline();
-
-    function initHeadline() {
-      animateHeadline(document.querySelectorAll('.headline'));
-    }
-
-    function animateHeadline(headlines) {
-      var duration = animationDelay;
-      headlines.forEach(function (headline) {
-        setTimeout(function () {
-          hideWord(headline.querySelector('.is-visible'));
-        }, duration);
-      });
-    }
-
-    function hideWord(word) {
-      var nextWord = takeNext(word);
-      switchWord(word, nextWord);
-      setTimeout(function () {
-        hideWord(nextWord);
-      }, animationDelay);
-    }
-
-    function takeNext(word) {
-      return word.nextElementSibling ? word.nextElementSibling : word.parentElement.firstElementChild;
-    }
-
-    function switchWord(oldWord, newWord) {
-      oldWord.classList.remove('is-visible');
-      oldWord.classList.add('is-hidden');
-      newWord.classList.remove('is-hidden');
-      newWord.classList.add('is-visible');
-    }
-  });
-
   const pm_input_selector = 'input.ant-input, textarea.ant-input';
   const pm_strip_props = [
     'background',
@@ -261,4 +242,4 @@
     pm_init();
   }
 </script>
-{{ template "page/body_end" .}}
+{{ template "page/body_end" .}}