单击时搜索栏不透明度的平滑过渡[重复]

Question

我有一个搜索栏，我想知道点击它时是否有一种平滑过渡的方法？我尝试在搜索栏 CSS 上添加 transition: 0.4s ease，但这不起作用。我也尝试了关键帧动画，但这也不起作用。这也不是颜色过渡，我将不透明度自动设置为 85%，点击后它会降低到 60%，这就是我想要实现平滑过渡的原因。

.search .query {
  border: 0;
  outline: 0;
  background-color: transparent;
  font-family: inherit;
  font-size: 14px;
  margin-top: 20px;
  width: 100%;
  opacity: 85%;
  transition: 0.4s ease;
}

input:focus::-webkit-input-placeholder {
  opacity: 60%;
}

input:focus:-moz-placeholder {
  opacity: 60%;
}

input:focus::-moz-placeholder {
  opacity: 60%;
}

input:focus:-ms-input-placeholder {
  opacity: 60%;
}

<form class="search" action="javascript:return false">
  <input type="text" class="query" placeholder="search tags...">
</form>

Answer 1

请确保您只编辑占位符文本，而不是整个输入字段。 :)

.search .query {
  border: 0;
  outline: 0;
  background-color: transparent;
  font-family: inherit;
  font-size: 14px;
  margin-top: 20px;
  width: 100%;
}

.search .query::placeholder {
  opacity: 0.85;
  transition: 0.4s ease;
}

.search .query:focus::placeholder {
  opacity: 0.6;
}

<form class="search" action="javascript:return false">
  <input type="text" class="query" placeholder="search tags...">
</form>