如何創建輸入表單之間的無縫轉換？

我有一個簡單的註冊表單，我正在構建，我添加了代碼以使單擊時輸入字段的高度發生變化。如何創建輸入表單之間的無縫轉換？

這裏的HTML：

<body> 
<div id="container"> 
    <img id="logo" src="logo.png"/> 
    <h2>Register Your Device</h2> 

    <form id="preload"> 
     <fieldset> 
      <label>SERIAL NUMBER<br> 
       <input type="text" name="registrationid"> 
      </label><br> 

      <label>USERNAME<br> 
       <input type="text" name="username"> 
      </label><br> 

      <label>PASSWORD<br> 
       <input type="password" name="password"> 
      </label> 
     </fieldset> 

     <fieldset> 
      <input class="button" type="button" name="register" value="REGISTER"> 
     </fieldset> 

    </form> 
</div>

下面是該CSS：

input { 
    font-family: "Helvetica", Arial, sans-serif; 
    outline:none; 
    border: 1px solid #e8e8e8; 
    border-radius: 10px; 
    padding:10px 10px; 
    margin:10px 0 20px 0; 

width:100%; 
    max-width: 290px; 
    height:15px; 
    transition:0.3s; 
} 

input:focus { 
    height:30px; 
    color:#3ea9f5; 
    border:1px solid #3ea9f5; 
}

現在我的問題是，這個是它使形式淡入負荷好吧，當我只想要點擊時窗體高度過渡。

我用這個小方法：

.preload * { 
    transition:none; 
}

，並擺脫在躍遷不必要的褪色的，但是當我點擊不同的形式，高度瞬間跳回到原來的高度，而不會在一個過渡原始高度。

我該如何解決這個問題？希望我能夠很好地回答這個問題。

來源

2017-02-15 Malik Hinds

我假設'.fade'類在頁面加載中淡出某些東西，不是嗎？如果是這樣，我們也需要這個CSS。因爲你的代碼目前並沒有淡入任何東西。我們需要一個能夠顯示問題的[mcve]。 –

.fade類是我很難修復它的嘗試。我編輯了代碼。 –

那麼是什麼導致事物淡入？你是否嘗試過將'input'上的'transition'行改爲'transition：height 0.3s;'？ –

您的input的過渡屬性未指定要設置動畫的屬性，所以默認選擇所有屬性以應用過渡。

試試這個：

input { 
    border: 1px solid #e8e8e8; 
    transition: height 0.3s ease, border-color 0.3s ease; 
} 

input:focus { 
    border-color: #3ea9f5; 
}

即只針對選擇的特定屬性過渡。使用ease也平滑了一些過渡。此外，不要忘記包含transition的瀏覽器回退。

來源

2017-02-15 20:27:25 Jesse

如何創建輸入表單之間的無縫轉換？

回答

相關問題