javascript - 使用 css3 过渡字体大小和边距顶部

Question

我正在尝试创建一个类似于 paytm 登录字段的文本框。下面是我的代码:

$(".textBox input").on("focus", function() {
  $(".placeholder").show();
  $(".placeholder").css({
    "margin-top": "0px",
    "font-size": "11px"
  });
});

.textBox {
  height: 50px;
}
.textBox input {
  border: none;
  border-bottom: 1px solid black;
  margin-top: 20px;
}
.textBox input:focus {
  outline: none;
  border-bottom: 1px solid #00B9F5;
}
.textBox input:focus::-webkit-input-placeholder {
  color: white;
}
.placeholder {
  display: none;
  position: absolute;
  color: #00B9F5;
  margin-top: 20px;
  -webkit-transition: font-size 1s linear, margin-top 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textBox">
  <span class="placeholder">Enter your name</span>
  <input type="text" name="name" placeholder="Enter your name">
</div>

我希望占位符在 paytm 登录字段中发生动画。过渡没有发生。有什么建议吗？

Answer 1

您正在使用 -webkit- 前缀进行转换；仅适用于 Chrome 和 Safari。 transition 现在得到了很好的支持，afaik。

$(".textBox input").on("focus", function() {
  $(".placeholder").css({
    opacity: 1,
    "margin-top": "0px",
    "font-size": "11px"
  });
  $(this).attr("placeholder", "");
});

.textBox {
  height: 50px;
}
.textBox input {
  border: none;
  border-bottom: 1px solid black;
  margin-top: 20px;
}
.textBox input:focus {
  outline: none;
  border-bottom: 1px solid #00B9F5;
}
.textBox input:focus::-webkit-input-placeholder {
  color: white;
}
.placeholder {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  color: #00B9F5;
  margin-top: 20px;
  transition: .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textBox">
  <span class="placeholder">Enter your name</span>
  <input type="text" name="name" placeholder="Enter your name">
</div>