Question

因此，我正在使用登录表单尝试通过input转换来扩展两个CSS3字段。我能够使用:focus选择器将其展开得很好，但我无法进行转换。我可以让颜色过渡，但不是尺寸。这是我现在的代码：没有内联CSS。

                .loginForm input[type=text],
                .loginForm input[type=password] {
                    line-height: 100%;
                    margin: 10px 0;
                    padding: 6px 15px;
                    font-size: 12px;
                    font-weight: bold;
                    border-radius: 26px;
                    transition: background-color 0.3s;
                    transition: width 1s;
                }
                    .loginForm input[type=text]:focus,
                    .loginForm input[type=password]:focus {
                        background-color: #FAEBD7;
                        width: 100%;
                    }

我也试过这个：

transition: all 1s ease-in-out;

和此：

transition: width 1s ease-in-out;

Answer 1

您必须为输入定义width：

.loginForm input[type=text], .loginForm input[type=password] {
   width: 150px;
  //more code;
}

使用转化width＆amp; background-color在一行中：

transition: width 1s, background-color 0.3s;

完整代码：

.loginForm input[type=text], .loginForm input[type=password] {
  line-height: 100%;
  margin: 10px 0;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 26px;
  width: 150px;
  transition: width 1s, background-color 0.3s;
}

.loginForm input[type=text]:focus, .loginForm input[type=password]:focus {
  background-color: #FAEBD7;
   width: 90%;
}

<form class="loginForm">
  <input type="text" name=""><br>
  <input type="password" name="">
</form>

Answer 2

您无法transition auto来transition。如果您想width到特定width，则需要设置初始background-image。

此外，您的transition transition仍然无法正常工作，因为它被其后的那个覆盖了。要在元素上使用多个* { margin:0;padding:0;box-sizing:border-box; } .loginForm input[type=text], .loginForm input[type=password] { line-height: 100%; margin: 10px 0; padding: 6px 15px; font-size: 12px; font-weight: bold; border-radius: 26px; transition: width 1s, background-color 0.3s; width: 65%; } .loginForm input[type=text]:focus, .loginForm input[type=password]:focus { background-color: #FAEBD7; width: 100%; }，请用逗号分隔它们。

＆＃13;

<div class="loginForm">
  <input type="text">
  <input type="password">
</div>

＆＃13;

dataSnapShot : "DataSnapshot={key='-Kn...', value="latitude:.., longitude:..., Name:..."}

＆＃13;

CSS3过渡不影响宽度

2 个答案: