CSS轉換是即時的，不會消失在轉換中

在嘗試提出可理解的用戶界面和大量設計更改時，我經歷了很多問題，但直到最近，transition屬性的行爲異常。CSS轉換是即時的，不會消失在轉換中

@charset "UTF-8";.header{top:0;position: fixed;right: 0;left:0;background: #555;height: 50pt;border-top: 4pt solid #333;box-shadow: 0 0 5pt #000}.header-menu{vertical-align: top;margin-top: -12pt;}.header-menu ul li{list-style: none;display: inline}.header-menu ul li a{color:#fff;display: inline-block;line-height: 50pt;padding: 0 10pt;text-decoration: none;transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);-webkit-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);-moz-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);-ms-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);-o-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);}.header-menu ul li a:hover{background-color: rgba(0, 0, 0, 0.05)}

<!doctype html><html lang="en-GB" style=""> 
 
<head> 
 
    <base href="http://localhost/"> 
 
    <!-- <base href="http://www.icodefoundation.com/"> --> 
 
    <meta charset="UTF-8" /><meta http-equiv="refresh" content="60" /><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 
 
    <link rel="stylesheet" type="text/css" href="Public/Assets/Styling/All.css" /> 
 
    <title>iCode Foundation</title> 
 
</head> 
 
<body> 
 
    <div class="header header-desktop header-mobile-compatible"> 
 
    <div class="header-menu global-menu-styling" role="menu"> 
 
     <ul> 
 
     <li role="menuitem"><a href="/PHP">Home</a></li> 
 
     <!-- <li role="menuitem"><a href="javascript:void(0)">About</a></li> --> 
 
     <li><a href="javascript:void(0)">Volunteer</a></li> 
 
     <!--<li role="menuitem"><a href="javascript:void(0)">Reports</a></li>--> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
     <div class="content_0"> 
 
     <div class="same-styling override-same-styles" id="forms"> 
 
      <h1>Getting Started</h1> 
 
      Either register or login below to get started.<br>To read more about this website, click <a href="javascript:void(0)">here</a> if you'd like before continuing. 
 
     <div class="form-wrapper"><div class="login divs-inline"> 
 
      <h2>Login</h2> 
 
      <!-- Login Start --> 
 
      <form method="POST" action="index.php" role="form"> 
 
       <div class="inputs"><div class="errors"></div> 
 
       <input type="text" name="login-uname" placeholder="Username" autocomplete="off"> 
 
       <input type="password" name="login-pswd" placeholder="Password" autocomplete="off"> 
 
       <button type="submit" role="button" name="login-btn">Login</button> 
 
       </div> 
 
      </form> 
 
     <!-- Login End --> 
 
     </div> 
 
      <div class="register divs-inline"> 
 
       <h2>Register</h2> 
 
       <!-- Register Start --> 
 
       <form method="POST" action="index.php" role="form"> 
 
       <div class="inputs"> 
 
       <div class="errors"></div> 
 
        <input type="text" name="reg-fname" placeholder="Forename" autocomplete="off"class="fname"> 
 
        <input type="text" name="reg-lname" placeholder="Surname" autocomplete="off" class="lname"> 
 
        <input type="text" name="reg-uname" placeholder="Username" autocomplete="off"> 
 
        <input type="text" name="reg-email" placeholder="Email" autocomplete="off"> 
 
        <input type="text" name="reg-confirm-email" placeholder="Confirm Email" autocomplete="off"> 
 
        <input type="password" name="reg-pswd" placeholder="Password" autocomplete="off"> 
 
        <input type="password" name="reg-confirm-pswd" placeholder="Confirm Password" autocomplete="off"> 
 
        <button type="submit" role="button" name="reg-btn">Register</button> 
 
      </div> 
 
     </form> 
 
     <!-- Register End --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

我可以爲無法理解的代碼只有真誠地道歉。

來源

2017-08-26 Adam

請發表您的代碼unminified，這使得它非常難以閱讀 –

非前綴性質有什麼在我的答案我可以失蹤添加或調整，讓你接受？ – LGSon

因此，你已經解決了我的問題 - 沒有別的事可做。也許這個答案可能適用於不瞭解轉換的其他人。也許保護它？我如何將其作爲社區wiki文章？ – Adam

這是一個短期時間，短色階這使得它看起來像它不工作的立方貝塞爾的組合。

在這裏，我改變了所有人，所以你看到它實際上工作。

注，始終把最後

@charset "UTF-8"; 
 
.header { 
 
    top: 0; 
 
    position: fixed; 
 
    right: 0; 
 
    left: 0; 
 
    background: #555; 
 
    height: 50pt; 
 
    border-top: 4pt solid #333; 
 
    box-shadow: 0 0 5pt #000 
 
} 
 

 
.header-menu { 
 
    vertical-align: top; 
 
    margin-top: -12pt; 
 
} 
 

 
.header-menu ul li { 
 
    list-style: none; 
 
    display: inline 
 
} 
 

 
.header-menu ul li a { 
 
    color: #fff; 
 
    display: inline-block; 
 
    line-height: 50pt; 
 
    padding: 0 10pt; 
 
    text-decoration: none; 
 
    -webkit-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1); 
 
    -moz-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1); 
 
    -ms-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1); 
 
    -o-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1); 
 
    transition: all 1.60s; 
 
} 
 

 
.header-menu ul li a:hover { 
 
    background-color: rgba(0, 0, 0, .25); 
 
}

<!doctype html> 
 
<html lang="en-GB" style=""> 
 

 
<head> 
 
    <base href="http://localhost/"> 
 
    <!-- <base href="http://www.icodefoundation.com/"> --> 
 
    <meta charset="UTF-8" /> 
 
    <meta http-equiv="refresh" content="60" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 
 
    <link rel="stylesheet" type="text/css" href="Public/Assets/Styling/All.css" /> 
 
    <title>iCode Foundation</title> 
 
</head> 
 

 
<body> 
 
    <div class="header header-desktop header-mobile-compatible"> 
 
    <div class="header-menu global-menu-styling" role="menu"> 
 
     <ul> 
 
     <li role="menuitem"><a href="/PHP">Home</a></li> 
 
     <!-- <li role="menuitem"><a href="javascript:void(0)">About</a></li> --> 
 
     <li><a href="javascript:void(0)">Volunteer</a></li> 
 
     <!--<li role="menuitem"><a href="javascript:void(0)">Reports</a></li>--> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="content_0"> 
 
     <div class="same-styling override-same-styles" id="forms"> 
 
     <h1>Getting Started</h1>Either register or login below to get started.<br>To read more about this website, click <a href="javascript:void(0)">here</a> if you'd like before continuing. 
 
     <div class="form-wrapper"> 
 
      <div class="login divs-inline"> 
 
      <h2>Login</h2> 
 
      <!-- Login Start --> 
 
      <form method="POST" action="index.php" role="form"> 
 
       <div class="inputs"> 
 
       <div class="errors"></div><input type="text" name="login-uname" placeholder="Username" autocomplete="off"><input type="password" name="login-pswd" placeholder="Password" autocomplete="off"><button type="submit" role="button" name="login-btn">Login</button></div> 
 
      </form> 
 
      <!-- Login End --> 
 
      </div> 
 
      <div class="register divs-inline"> 
 
      <h2>Register</h2> 
 
      <!-- Register Start --> 
 
      <form method="POST" action="index.php" role="form"> 
 
       <div class="inputs"> 
 
       <div class="errors"></div><input type="text" name="reg-fname" placeholder="Forename" autocomplete="off" class="fname"><input type="text" name="reg-lname" placeholder="Surname" autocomplete="off" class="lname"><input type="text" name="reg-uname" placeholder="Username" 
 
        autocomplete="off"><input type="text" name="reg-email" placeholder="Email" autocomplete="off"><input type="text" name="reg-confirm-email" placeholder="Confirm Email" autocomplete="off"><input type="password" name="reg-pswd" placeholder="Password" 
 
        autocomplete="off"><input type="password" name="reg-confirm-pswd" placeholder="Confirm Password" autocomplete="off"><button type="submit" role="button" name="reg-btn">Register</button></div> 
 
      </form> 
 
      <!-- Register End --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

來源

2017-08-26 15:11:52 LGSon

欣賞這個答案。謝謝。 – Adam

有沒有辦法添加更淺的黑色背景？ – Adam

@亞當然，你可以改變它，你希望...更新我的答案一點。但請注意，如果_color change_和_transition duration_對於小/短，它可能會出現在轉換立即 – LGSon

CSS轉換是即時的，不會消失在轉換中

回答

相關問題