Question

我有一个输入文本框和一个按钮元素。我希望文本框背景颜色淡入淡出，只需单击一下按钮即可淡出。

HTML

<input type="text">
<button>Click</button>

CSS

input{
   transition: background-color 0.1s ease-in-out 0s;
}
input:target{
    background-color: red;
}

我无法弄清楚如何在按钮点击时触发动画。

这是所需效果的GIF

http://i.imgur.com/3CNllvP.gif

编辑最初我问过在没有javascript的情况下完成此操作，但似乎无法实现。

Answer 1

在点击时切换一个类，并使用与该类关联的animation来执行闪光效果。

不确定为什么这在我的评论中不起作用，但这是一个代码笔 - http://codepen.io/anon/pen/BpMpYe

var button = document.getElementById('button'),
    input = document.getElementById('input'),
    flashClass = 'flash';

button.addEventListener('click',function() {
  input.classList.add(flashClass);
});

input.addEventListener('animationend',function() {
  this.classList.remove(flashClass);
});

.flash {
  animation: flash .15s;
}

@keyframes flash {
  50% {
    background: green;
  }
  100% {
    background: transparent;
  }
}

<input id="input" type="text">
<button id="button">Click</button>

Answer 2

请在JSFiddle：https://jsfiddle.net/9j826bcb/5/

上尝试这个工作示例

我在这里使用了CSS3动画。

@keyframes highlight {
  50%  {background-color: green;}
  100% { background-color: white; }
}

input {
  outline: 0;
}

input.active {
  background-color: white;
  animation-name: highlight;
  animation-duration: .1s;
}

input.final {
  border:1px solid green;
}

input.final::selection {
  background: green;
}

input.final::-moz-selection {
  background: green; 
}

另外，请注意，您必须将jQuery包含在项目源中，然后触发“点击”。动作：

$('button').on('click', function() {
  setTimeout(function() {
    $('input').addClass('active');
  }, 100);

  $('input').removeClass('active').addClass('final').trigger('focus').select();
});

按钮上的Flash输入文本框背景单击

2 个答案: