HTML5Placeholder动画插件

占位符的动画效果，真的能给表单加不少分。的placeholder本来就挺实用，但样式太死板。这个 HTML5 动画插件就蛮有意思了，能让占位符淡出、滑动甚至变色，用户体验直接提升。

placeholder 动画的核心其实就是靠 CSS3 的动画和 JavaScript 的事件监听。比如焦点触发时让 opacity 变成 0，失焦又恢复，代码也不复杂。

你可以这样玩：CSS 先写个动画类：

.placeholder-animate {
  transition: opacity 0.5s ease-in-out;
}

JS 里加个监听：

document.getElementById('yourInput').addEventListener('focus', function() {
  this.classList.add('placeholder-animate');
});
document.getElementById('yourInput').addEventListener('blur', function() {
  if (this.value === '') {
    this.classList.remove('placeholder-animate');
  }
});

嗯，思路就这么简单。更复杂的插件还能支持自定义动画样式、兼容不同浏览器，还附带 demo 和文档，直接用起来也省心。

插件打包在一个叫texiao7738_1560681027的压缩包里，你解压后看看有没有README，基本就能上手。

如果你想让表单页面更灵动一些，又不想自己从头写动画，这种插件挺值得一试的。