Question

我有这个简单的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>

Answer 1

如果我理解：当您点击按钮id = id =登录时，您想播放您的CSS动画，然后提交表格。所以一种解决方案是使用jQuery来延迟表单的提交。

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

添加目录时，CSS3按钮动画被破坏

1 个答案: