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

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

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

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

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

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

原生JS实现示例：

 
 
 


 

 
 请输入内容
 

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

Angularjs实现示例：

 
 
 
 
 


 

 请输入内容
 
 请填写内容
 

总结

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