2
私は簡単な登録フォームを作成しています。クリックしたときに入力フィールドの高さを変更するコードを追加しました。入力フォーム間のシームレスな移行を作成するにはどうすればよいですか？
ここでは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;
}
をし、それがのトランジションでは、不要なフェードを取り除きますが、私は別のフォームをクリックすると、高さが即座に移行することなく、元の高さまでジャンプ元の高さ。
どうすればこの問題を解決できますか？うまくいけば私は答えのために十分にこれを言いました。
'.fade'クラスがページの読み込みに何かをフェードアウトしていると仮定していますか？もしそうなら、そのCSSも必要です。あなたのコードは、現時点で何かをフェードアウトしていないからです。問題を示す[mcve]が必要です。 –
.fadeクラスはそれを修正しようとする私の貧弱な試みでした。私はコードからそれを編集しました。 –
それでは、何が消えていくのですか？そして、 'input'の' transition'行を 'transition：height 0.3s;'に変更しようとしましたか？ –