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现在得到很好的支持。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

<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>

＆＃13;

{"capabilities":[{"browserName":"Nexus_4_1","version":"4.4.2","maxInstances":1,"platform":"ANDROID"}],"configuration":{"nodeTimeout":120,"port":4723,"hubPort":4444,"proxy":"org.openqa.grid.selenium.proxy.DefaultRemoteProxy","hubHost":"127.0.0.1", "nodePolling":2000, "registerCycle":10000,"register":true,"cleanUpCycle":2000,"timeout":30000,"maxSession":1}}

＆＃13;

 partner    sale
  AMZ       newyear
  HD        newyear
  WAF       fallmake
  FEG       fallmake
  OVR       
  AMZ       fallmake
  FAU       balck
  HD         
  ATG       balck

＆＃13;

使用css3过渡font-size和margin-top

2 个答案: