No hay efecto hasta que agregue el enfoque por primera vez al cuadro de entrada. Vea la imagen a continuación:
Luego haga clic en cualquiera de ellos, y el enfoque activará una animación. El resultado de la animación se muestra en la Figura 2:
Ingrese el texto de la contraseña de inicio de sesión en el medio y se agregará automáticamente a la parte superior (perdóname para no capturar la imagen del proceso de animación).
Lo probé y descubrí que solo los navegadores avanzados respaldan este efecto (es decir, solo admite IE10, IE11 y Edge).
A continuación, pegaré el código. El principio es muy simple, que es desencadenar la adición y eliminación de los nombres de clases a través de eventos. La animación específica es implementada por CSS3, por lo que los navegadores de bajo nivel no la admiten.
Ejemplo de implementación de JS nativo:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{relleno: 0; margen: 0; } .demo {borde: 1px gris sólido; Ancho: 300px; Altura: 200px; Posición: relativo; Izquierda: 200px; Arriba: 200px; -WebKit-Transition: todos los 0.3s lineales; -Moz-Transition: todos los 0.3s lineales; -Ms-Transition: todos 0.3s lineal; -O-transición: todos los 0.3s lineales; Transición: todos los 0.3s lineales; } .demo Entrada {ancho: 200px; Altura: 100px; Posición: Absoluto; Izquierda: 50px; Arriba: 50px; -WebKit-Transition: todos los 0.3s lineales; -Moz-Transition: todos los 0.3s lineales; -Ms-Transition: todos 0.3s lineal; -O-transición: todos los 0.3s lineales; Transición: todos los 0.3s lineales; } .demo etiqueta {posición: absoluta; arriba: 100px; Izquierda: 80px; tamaño de fuente: 14px; -WebKit-Transition: todos los 0.3s lineales; -Moz-Transition: todos los 0.3s lineales; -Ms-Transition: todos 0.3s lineal; -O-transición: todos los 0.3s lineales; Transición: todos los 0.3s lineales; } .ActiveDeMo {border: 1px #fd715a sólido; -WebKit-Transition: todos los 0.3s facilitados; -Moz-Transition: todos los 0.3s facilitados; -Ms-Transition: todos los 0.3s facilitados; -O-transición: todos los 0.3s facilitados; Transición: todos los 0.3 facilitados; } .ActiveInput {border: 1px #fd715a sólido; -WebKit-Transition: todos los 0.3s facilitados; -Moz-Transition: todos los 0.3s facilitados; -Ms-Transition: todos los 0.3s facilitados; -O-transición: todos los 0.3s facilitados; Transición: todos los 0.3 facilitados; } .activeLabel {font-size: 10px; Color: #FD715A; Fondo: blanco; -webkit-transform: traduce (-20px, -58px); -Moz-Transform: traduce (-20px, -58px); -ms-transform: traduce (-20px, -58px); -ms-transform: traduce (-20px, -58px); -o-transform: traduce (-20px, -58px); transformar: traducir (-20px, -58px); -WebKit-Transition: todos los 0.3s lineales; -Moz-Transition: todos los 0.3s lineales; -Ms-Transition: todos 0.3 lineal; -O-transición: todos los 0.3s lineales; -O-transición: todos los 0.3s lineales; Transición: todos los 0.3s lineales; } </style> </head> <body> <div> <input type = "text" id = "inputDemo"/> <etiqueta for = "inputDemo"> Ingrese el contenido </label> </div> </body> <script> var addEvent = function (function, event, callback) {if (obj.addeventListener) if (obj.attachevent) {obj.attachevent ('on'+evento, llamada)}}; var demo = document.QuerySelector (". demo"); var input = document.querySelector ("#inputDemo"); var etiqueta = document.querySelector (". etiqueta de demostración"); addEvent (entrada, "foco", function () {Demo.ClassName+= "Activedemo"; this.className+= "ActiveInput"; Label.ClassName+= "Activelabel";}); addEvent (input, 'blur', function () {this.classname = this.classname.replace (// s*ActiveInput/s*/, ''); etiqueta.classname = label.classname.replace (// s*activelabel/s*/, ''); etiquetaEl siguiente es un efecto simple implementado usando Angular. El principio es muy simple, que es operar el DOM en la instrucción para implementar la animación.
Ejemplo de implementación de AngularJS:
<! Doctype html> <html lang = "en" ng-app = "formanimation"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javaScript"> </scritch> <scritch src = "lib/angular-animate.js" type = "text/javascript"> </script> <style> *{relleno: 0; margen: 0; } .container {ancho: 445px; Altura: 370px; Border-izquierda: 10px Solid #D4D4D4; Posición: relativo; Izquierda: 100px; arriba: 100px; } .Container Entrada {posición: Absolute; arriba: 100px; Izquierda: 25px; Altura: 40px; Ancho: 385px; } .container span {ancho: 80px; Altura: 25px; tamaño de fuente: 10px; Antecedentes: RGB (237,97,83); Color: blanco; Posición: Absoluto; Izquierda: 300px; Arriba: 109px; Línea de altura: 25px; text-align: .container .labelstyle {posición: absoluto; Izquierda: 45px; Arriba: 115px; tamaño de fuente: 14px; Color: #929292; Índice Z: 999; Font: "Helvetica Neue", Helvetica, Arial, Sans-Serif; -WebKit-Transition: todos los 0.2s facilitados; -Moz-Transition: todos los 0.2s facilitados; -Ms-Transition: todos los 0.2s facilidad; -O-transición: todos los 0.2s facilidad; Transición: todos los 0.2s facilidad; } .InputActive {border: 2px sólido RGB (237,97,90); -WebKit-Transition: todos los 0.2s facilitados; -Moz-Transition: todos los 0.2s facilitados; -Ms-Transition: todos los 0.2s facilidad; -O-transición: todos los 0.2s facilidad; Transición: todos los 0.2s facilidad; } .Labelactive {posición: absoluto; Izquierda: 45px; Arriba: 115px; Índice Z: 999; Fondo: blanco; borde: 2px blanco sólido; Color: RGB (237,97,90); tamaño de fuente: 10px; -webkit-transform: traduce (-10px, -23px); -Moz-Transform: traduce (-10px, -23px); -ms-transform: traduce (-10px, -23px); -o-transform: traduce (-10px, -23px); transformar: traducir (-10px, -23px); -WebKit-Transition: todos los 0.2s facilitados; -Moz-Transition: todos los 0.2s facilitados; -Ms-Transition: todos los 0.2s facilidad; -O-transición: todos los 0.2s facilidad; Transición: todos los 0.2s facilidad; } </style> </head> <body ng-concontroller = "formanimationController"> <forma action = "" form-animation> <etiqueta for = "inputDemo"> Por favor, ingrese el contenido </selabel> <input type = "text" id = "inputDemo"/> <span> por favor complete el contenido </span> </form> </body> <script> Angular.module (—pla span> por favor, llene el contenido </span> </form> </body> <scritector> .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 ("). element.find ("Label"). RemoveClass ("LabelStyle"). AddClass ("LabelActive")}); })}}}}}}]) </script> </ html>Resumir
Los dos métodos anteriores solo reflejan el método de implementación. Para estilos de implementación específicos, puede consultar las representaciones y ajustar el estilo CSS. Espero que el contenido de este artículo sea útil para que todos aprendan Angularjs y JS. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse. Gracias por su apoyo a Wulin.com.