使用AngularJS和原生js动态效果的输入框，分别

在开始添加到输入框之前，没有任何效果：


然后点击其中任何一个，焦点会触发动画，动画的结果如图2所示。


中间的输入登录密码将自动添加到顶部（请原谅我未截取到动画进程的图片）。

我测试了它，这种效果只有通过先进的浏览器的支持（即只有IE10，IE11，边缘支持）。

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

本地js实现示例：








* {
填充：0；
保证金：0；
}
演示{。
border: 1px solid灰色；
宽度：300px；
身高：200px；
职位：相对；
左：200px；
上图：200px；
WebKit的过渡：所有0.3s线性；
-moz过渡：所有0.3s线性；
MS：所有0.3s线性过渡；
- O转换：所有0.3s线性；
过渡：所有的0.3s线性；
}
演示输入{
宽度：200px；
身高：100px；
位置：绝对；
左：50px；
上图：50px；
WebKit的过渡：所有0.3s线性；
-moz过渡：所有0.3s线性；
MS：所有0.3s线性过渡；
- O转换：所有0.3s线性；
过渡：所有的0.3s线性；
}
演示标签{
位置：绝对；
上图：100px；
左：80px；
字体大小：14px；
WebKit的过渡：所有0.3s线性；
-moz过渡：所有0.3s线性；
MS：所有0.3s线性过渡；
- O转换：所有0.3s线性；
过渡：所有的0.3s线性；
}
activedemo {。
边境：1px # fd715a固体；
WebKit的过渡：所有0.3s缓解；
过渡：所有的0.3s缓解-moz；
MS过渡：所有0.3s缓解；
- O转换：所有0.3s缓解；
过渡：所有的0.3s缓解；
}
activeinput {。
边境：1px # fd715a固体；
WebKit的过渡：所有0.3s缓解；
过渡：所有的0.3s缓解-moz；
MS过渡：所有0.3s缓解；
- O转换：所有0.3s缓解；
过渡：所有的0.3s缓解；
}
activelabel {。
字体大小：10px；
颜色：# fd715a；
背景：白色；
WebKit的变换：翻译（20px 58px -，-）；
-moz变换：翻译（- 20px，- 58px）；
MS变换：翻译（20px 58px -，-）；
- o-transform：翻译（20px 58px -，-）；
变换：平移（- 20px，- 58px）；
WebKit的过渡：所有0.3s线性；
-moz过渡：所有0.3s线性；
- MS转换：所有0.3个线性；
- O转换：所有0.3s线性；
过渡：所有的0.3s线性；
}






请输入内容



VaR AddEvent =功能（obj，事件、回调）{
如果（obj。addEventListener）{
Obj.addEventListener（事件、回调）
} else if（obj。attachevent）{
obj.attachevent（开+事件、回调）
}
}；
VaR演示= document.queryselector（。演示）；

无功输入= document.queryselector（# inputdemo ）；
var标签= document.queryselector（。演示标签）；
AddEvent（输入，焦点
演示。类名+ =activedemo ；
这个类名+ =activeinput ；
标签。类名+ =activelabel ；
}）；
AddEvent（输入，'blur功能（））{
这一方法= this.classname.replace（ / * activeinput * /，）；
标签。类名= label.classname.replace（ / * activelabel * /，）；
演示。类名= demo.classname.replace（ / * activedemo * /，）；
}）




以下是用角实现的简单效果。原理很简单，即通过在指令中操作DOM来操作动画。

AngularJS实现实例：










* {
填充：0；
保证金：0；
}
集装箱{。
宽度：445px；
身高：370px；
左边界：10px solid # d4d4d4；
职位：相对；
左：100px；
上图：100px；
}
容器输入{
位置：绝对；
上图：100px；
左：25px；
身高：40px；
宽度：385px；
}
容器跨度{
宽度：80px；
身高：25px；
字体大小：10px；
背景：RGB（237,97,83）；
颜色：白色；
位置：绝对；
左：300px；
上图：109px；
行高：25px；
文本对齐：中心；
}
LabelStyle {。容器。
位置：绝对；
左：45px；
上图：115px；
字体大小：14px；
颜色：# 929292；
Z指数：999；
字体：Helvetica Neue
WebKit的过渡：所有0.2s缓解；
过渡：所有的0.2s缓解-moz；
MS过渡：所有0.2s缓解；
- O转换：所有0.2s缓解；
过渡：所有的0.2s缓解；
}
输入{。
边境：2px固体RGB（237,97,90）；
WebKit的过渡：所有0.2s缓解；
过渡：所有的0.2s缓解-moz；
MS过渡：所有0.2s缓解；
- O转换：所有0.2s缓解；
过渡：所有的0.2s缓解；
}
labelactive {。
位置：绝对；
左：45px；
上图：115px；
Z指数：999；
背景：白色；
边境：2px白色固体；
颜色：RGB（237,97,90）；
字体大小：10px；
WebKit的变换：翻译（- 10px，- 23px）；
-moz变换：翻译（- 10px，- 23px）；
MS变换：翻译（- 10px，- 23px）；
- o-transform：翻译（- 10px，- 23px）；
变换：平移（- 10px，- 23px）；
WebKit的过渡：所有0.2s缓解；
过渡：所有的0.2s缓解-moz；
MS过渡：所有0.2s缓解；
- O转换：所有0.2s缓解；
过渡：所有的0.2s缓解；
}




请输入内容

请填一下目录。



Angular.module（'formanimation，{ }）
控制器（'formanimationcontroller，函数（）{（）{

}）
。指令（'formanimation，{ $动画功能（$动画）{）
返回{
限制：'ea，
链接：功能（范围、元素、属性）{
Element.find（输入）。在（'focus'，函数（）{（）{
Element.find（输入）。AddClass（输入）；
Element.find（标签），RemoveClass（LabelStyle）。AddClass（labelactive ）
}）；
Element.find（输入），（'blur，函数（）{（）{
Element.find（输入）。RemoveClass（输入）；
Element.find（标签），RemoveClass（labelactive）。AddClass（LabelStyle ）；
}）
}
}
} }）





总结



以上两种方法只反映了实现的方式，具体的实现方式可以参考效果图，调整CSS样式。希望本文的内容将帮助你学习AngularJS和JS。如果您有任何问题要沟通，谢谢您的支持。