Question

我正在尝试在下面的链接中实现以下Click动画：

目前，我已将模板实现到PHP登录脚本中，但是我不确定如何使它与我正在使用的登录脚本一起工作（https://samjlevy.com/php-ldap-login/）

当按下按钮时，我可以将其设置为动画，但是显然它不能用于我的登录脚本。登录脚本确实可以工作，但是无需添加新的登录按钮动画。

我已经把这个示例代码弄得一团糟，现在迷路了。任何方向都会有所帮助。对我来说，这是一次学习经历。我是开发领域的新手。


// check to see if user is logging out
if(isset($_GET['out'])) {
    // destroy session
    session_unset();
    $_SESSION = array();
    unset($_SESSION['user'],$_SESSION['access']);
    session_destroy();
}

// check to see if login form has been submitted
if(isset($_POST['userLogin'])){
    // run information through authenticator
    if(authenticate($_POST['userLogin'],$_POST['userPassword']))
    {
        // authentication passed
        header("Location: protected.php");
        die();
    } else {
        // authentication failed
        $error = 1;
    }
}




<form class="login">
        <div class="form-label-group">
        <input type="username" name="userLogin" id="inputUser" class="form-control input" placeholder="Username" required autofocus>
                <label for="inputUser">Username</label>
              </div>
              <div class="form-label-group">
                <input type="password" name="userPassword" id="inputPassword" class="form-control input" placeholder="Password" required>
                <label for="inputPassword">Password</label>
              </div>              
    <button>
      <i class="spinner"></i>
      <span class="state">Log in</span>
    </button>
              <hr class="my-4">
                        </form>
          </div>
        </div>
      </div>
    </div>
    </div>
    <script>
    var working = false;
    $('.login').on('submit', function(e) {
      e.preventDefault();
      if (working) return;
      working = true;
      var $this = $(this),
        $state = $this.find('button > .state');
      $this.addClass('loading');
      $state.html('Authenticating');
      setTimeout(function() {
        $this.addClass('ok');
        $state.html('Welcome back!');
        setTimeout(function() {
          $state.html('Log in');
          $this.removeClass('ok loading');
          working = false;
        }, 4000);
      }, 3000);
    });     
    </script>
    </body>
</html>

按照上面提供的示例示例（https://codepen.io/boudra/pen/YXzLBN）。我在实现我的PHP变量“ access”以显示“成功”动画并将其设置为“ 1”时重定向到index.php时遇到麻烦。

PHP / Login项目动画的问题

0 个答案: