我有一个带有花式按钮的简单HTML 5和CSS3脚本,当按下该按钮时,会显示CSS动画,但仅当它没有目录时才显示。当我添加重定向时,该网站会立即加载,而忽略赋予按钮的动画。如何在网站加载新页面之前向按钮添加重定向并完全播放CSS动画

        <!DOCUTYPE html>
    <html lang="En">
    <meta charset="utf-8">
    <!--CREDITS-->
    <meta name="Developer" content="Elitezen">
    <meta name="Language(s)" content="HTML5 , CSS3 , JS">
    <meta name="Software" content="anWriter">
    <!-- END CREDITS -->
    <head>
       <title> Elitezen Website Test | Login Page </title>
    <style>
    html {
          background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
          background-repeat: no-repeat;
          min-height: 100%;
          background-size: cover;

    }

    h1 {
        color:#ffffff;
        margin-top:20px;
    }

    #Login{
           /*VISUALS*/
           padding-left:20px;
           padding-right:20px;
           padding-top:10px;
           padding-bottom:10px;
           background-color:#0095f0;
           border:none;
           color:#ffffff;
           font-weight:bold;
           border-radius:4px;
           display: inline-block;
           /*POSITION*/
           position: absolute;
           top: 400px;
           right: 135px;
           /*Metrics*/
           font-size:20px;
                               /*ANIMATION*/
          transition: all 0.5s;
          cursor: pointer;
          margin: 5px;
          }

    #Login span {
                 cursor: pointer;
                 display: inline-block;
                 position: relative;
                 transition: 0.5s;
                 }

    #Login span:after {
                       content: '\00bb';
                       position: absolute;
                       opacity: 0;
                       top : 0;
                       right: -20px;
                       transition: 0.5s;
                       }

    #Login:hover span {
                       padding-right: 25px;
                       }

    #Login:hover span:after {
                             opacity: 1;
                             right: 0;
    }


    </style>
    </head>
    <body>
    <h1 align="center">Welcome! <br /> Please Sign In...</h1>
    <form action="Oofio.html">
    <button id="Login" style="vertical-align:middle">
    <span>
    Login
    </button>
    </span>
    </form>

    <script>

    </script>
    </body>
    </html>

最佳答案

如果我了解:
当您单击按钮whid id = Login时,您要播放CSS动画,然后提交表单。
因此,一种解决方案是使用jQuery延迟表单的提交。

$('#Login').on('click',function(){
    //do something
    event.preventDefault();
    setTimeout( function () {
        $(form).submit();
    }, 300); //submit starts after 300ms
})

09-20 23:52