如何创建输入表单之间的无缝转换？

问题描述：

我有一个简单的注册表单，我正在构建，我添加了代码以使单击时输入字段的高度发生变化。如何创建输入表单之间的无缝转换？

这里的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;'？ –

答

您的input的过渡属性未指定要设置动画的属性，所以默认选择所有属性以应用过渡。

试试这个：

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

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

即只针对选择的特定属性过渡。使用ease也平滑了一些过渡。此外，不要忘记包含transition的浏览器回退。

如何创建输入表单之间的无缝转换？

相关推荐