利用Angularjs和原生JS分别实现动态效果的输入框

在刚开始没有给输入框添加焦点之前，没有任何效果。见下图：

然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二：

中间的输入登录密码文字，会自动添加到顶部（原谅我没有截取到动画过程的图片）。

我测试了一下，这样的效果只有高级浏览器支持（IE只有IE10、IE11、Edge支持）。

下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。

原生JS实现示例：

rush:xhtml;"> <Meta charset="UTF-8">

内容

下面是用Angular实现的一个简单的效果，原理很简单，就是在指令中通操作DOM来实现动画。

Angularjs实现示例：

rush:xhtml;"> <Meta charset="UTF-8"> 内容 请填写内容

总结

上面的两种方式只是体现了一下实现的方式，具体的实现样式大家可以可以参照效果图，调节CSS样式。希望这篇文章的内容对大家学习Angularjs和JS能有所帮助，如果有问题可以留言交流，谢谢大家对编程之家的支持。

原文地址：https://www.jb51.cc/js/46186.html