There is no effect until you begin to add focus to the input box. See figure below:
Then click on any of them, the focus will trigger an animation, the results of the animation see figure II:
The middle input login password text will be added to the top automatically (forgive me for not intercepting the image of the animation process).
I tested it, this effect only advanced browser support (ie only IE10, IE11, Edge support).
Let me post the code, the principle is very simple, that is, through the event to trigger the addition and deletion of class names. Specific animations are implemented by CSS3, which is why low-level browsers do not support them.
Native JS Implementation Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.demo{
border: 1px solid gray;
width: 300px;
height: 200px;
position: relative;
left: 200px;
top: 200px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.demo input{
width: 200px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.demo label{
position: absolute;
top: 100px;
left:80px;
font-size: 14px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.activeDemo{
border: 1px #fd715a solid;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.activeInput{
border: 1px #fd715a solid;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.activeLabel{
font-size: 10px;
color: #fd715a;
background: white;
-webkit-transform: translate(-20px, -58px);
-moz-transform: translate(-20px, -58px);
-ms-transform: translate(-20px, -58px);
-o-transform: translate(-20px, -58px);
transform: translate(-20px, -58px);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3 linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
</style>
</head>
<body>
<div class="demo">
<input type="text" id="inputDemo"/>
<label for="inputDemo">请输入内容</label>
</div>
</body>
<script>
var addEvent= function (obj,event,callback) {
if(obj.addEventListener){
obj.addEventListener(event,callback)
}else if(obj.attachEvent){
obj.attachEvent('on'+event,callback)
}
};
var demo=document.querySelector(".demo");
var input=document.querySelector("#inputDemo");
var label=document.querySelector(".demo label");
addEvent(input,"focus", function () {
demo.className+=" activeDemo";
this.className+=" activeInput";
label.className+=" activeLabel";
});
addEvent(input,'blur', function () {
this.className=this.className.replace(/\s*activeInput\s*/,' ');
label.className=label.className.replace(/\s*activeLabel\s*/,' ');
demo.className=demo.className.replace(/\s*activeDemo\s*/,' ');
})
</script>
</html>
Here is a simple effect with angular, the principle is simple, is to operate the DOM in the instructions to achieve animation.
ANGULARJS Implementation Example:
<!DOCTYPE html>
<html lang="en" ng-app="formAnimation">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/angular-animate.js" type="text/javascript"></script>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 445px;
height: 370px;
border-left: 10px solid #d4d4d4;
position: relative;
left: 100px;
top: 100px;
}
.container input{
position: absolute;
top: 100px;
left: 25px;
height: 40px;
width: 385px;
}
.container span{
width: 80px;
height: 25px;
font-size: 10px;
background: rgb(237,97,83);
color: white;
position: absolute;
left: 300px;
top: 109px;
line-height: 25px;
text-align: center;
}
.container .labelStyle{
position: absolute;
left: 45px;
top: 115px;
font-size: 14px;
color: #929292;
z-index: 999;
font: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.inputActive{
border: 2px solid rgb(237,97,90);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.labelActive{
position: absolute;
left: 45px;
top: 115px;
z-index: 999;
background: white;
border: 2px solid white;
color: rgb(237,97,90);
font-size: 10px;
-webkit-transform: translate(-10px, -23px);
-moz-transform: translate(-10px, -23px);
-ms-transform: translate(-10px, -23px);
-o-transform: translate(-10px, -23px);
transform: translate(-10px, -23px);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
</style>
</head>
<body ng-controller="formAnimationController">
<form action="" class="container" form-animation>
<label for="inputDemo" class="labelStyle">请输入内容</label>
<input type="text" id="inputDemo" />
<span>请填写内容</span>
</form>
</body>
<script>
angular.module('formAnimation',[])
.controller('formAnimationController', function () {
})
.directive('formAnimation',['$animate', function ($animate) {
return {
restrict:'EA',
link: function (scope, element, attr) {
element.find("input").on('focus', function () {
element.find("input").addClass("inputActive");
element.find("label").removeClass("labelStyle").addClass("labelActive")
});
element.find("input").on('blur', function () {
element.find("input").removeClass("inputActive");
element.find("label").removeClass("labelActive").addClass("labelStyle");
})
}
}
}])
</script>
</html>
Summarize
The above two ways just embodies the realization of the way, the specific implementation of the style you can refer to the effect chart, adjust the CSS style. Hope this article content for everyone to learn Angularjs and JS can help, if there are questions to communicate, thank you for your support cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
