Não há efeito até que você adicione o foco primeiro à caixa de entrada. Veja a foto abaixo:
Em seguida, clique em qualquer um deles e o foco acionará uma animação. O resultado da animação é mostrado na Figura 2:
Digite o texto da senha de login no meio e será adicionado automaticamente à parte superior (perdoe -me por não capturar a imagem do processo de animação).
Eu testei e descobri que apenas os navegadores avançados suportam esse efeito (ou seja, suporta apenas o IE10, IE11 e Edge).
Em seguida, vou colar o código. O princípio é muito simples, que é acionar a adição e exclusão de nomes de classe por meio de eventos. A animação específica é implementada pelo CSS3, e é por isso que os navegadores de baixo nível não a suportam.
Exemplo de implementação do JS nativo:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{padding: 0; margem: 0; } .Demo {Border: 1px Solid Grey; Largura: 300px; Altura: 200px; Posição: relativa; Esquerda: 200px; TOP: 200px; -Webkit-transição: todos os 0,3s lineares; -Moz-transição: todos os 0,3s lineares; -ms-transição: todos os 0,3s lineares; -O-transição: todos os 0,3s lineares; Transição: todos os 0,3s lineares; } .Demo Input {Width: 200px; Altura: 100px; Posição: Absoluto; Esquerda: 50px; Top: 50px; -Webkit-transição: todos os 0,3s lineares; -Moz-transição: todos os 0,3s lineares; -ms-transição: todos os 0,3s lineares; -O-transição: todos os 0,3s lineares; Transição: todos os 0,3s lineares; } .Demo Rótulo {Posição: Absolute; topo: 100px; Esquerda: 80px; Size da fonte: 14px; -Webkit-transição: todos os 0,3s lineares; -Moz-transição: todos os 0,3s lineares; -ms-transição: todos os 0,3s lineares; -O-transição: todos os 0,3s lineares; Transição: todos os 0,3s lineares; } .Activedemo {borda: 1px #fd715a sólido; -Webkit-transição: todas as 0.3s facilitam; -Moz-transição: todas as 0.3s facilitam; -ms-transição: todas as 0.3s facilitam; -O-transição: todas as 0.3s facilitam; Transição: todas as 0.3s facilitam; } .ActiveInput {Border: 1px #fd715a sólido; -Webkit-transição: todas as 0.3s facilitam; -Moz-transição: todas as 0.3s facilitam; -ms-transição: todas as 0.3s facilitam; -O-transição: todas as 0.3s facilitam; Transição: todas as 0.3s facilitam; } .ActivelABel {font-size: 10px; Cor: #fd715a; Antecedentes: Branco; -webkit-transform: tradutor (-20px, -58px); -moz-transform: tradutor (-20px, -58px); -ms-transform: translate (-20px, -58px); -ms-transform: translate (-20px, -58px); -o-transform: tradutor (-20px, -58px); Transform: traduzir (-20px, -58px); -Webkit-transição: todos os 0,3s lineares; -Moz-transição: todos os 0,3s lineares; -ms-transição: todos 0.3 linear; -O-transição: todos os 0,3s lineares; -O-transição: todos os 0,3s lineares; Transição: todos os 0,3s lineares; } </style> </ad Head> <body> <div> <input type = "text" id = "inputDemo"/> <Label para = "inputDemo"> Por favor, digite conteúdo </cret> </div> </cody> <ctript> var addEvent = function (obj, event) {if (obj.adDeVentListner) if (obj.attachevent) {obj.attachevent ('on'+evento, retorno de chamada)}}; var demo = document.QuerySelector (". Demo"); var input = document.QuerySelector ("#inputDemo"); var rótulo = document.QuerySelector (". Label de demonstração"); 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*/, ''); label.className = LABEL.ClassName.replace (// s*ativelabel/s*/, '); Demo.className = Demo.className.replace (// s*activedemo/s*/, '');A seguir, é apresentado um efeito simples implementado usando o Angular. O princípio é muito simples, que é operar o DOM na instrução para implementar a animação.
Exemplo de implementação do 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"> </script> type = "text/javaScript"> </sCript> <style> *{preenchimento: 0; margem: 0; } .Container {Width: 445px; Altura: 370px; Border-left: 10px Solid #D4D4D4; Posição: relativa; Esquerda: 100px; topo: 100px; } .Container Entrada {Posição: Absolute; topo: 100px; Esquerda: 25px; Altura: 40px; Largura: 385px; } .container span {width: 80px; Altura: 25px; Size da fonte: 10px; Antecedentes: RGB (237,97,83); Cor: Branco; Posição: Absoluto; Esquerda: 300px; TOP: 109px; altura de linha: 25px; Alinhamento de texto: .Container .LabelStyle {Posição: Absolute; Esquerda: 45px; Top: 115px; Size da fonte: 14px; Cor: #929292; Z-Index: 999; Fonte: "Helvetica Neue", Helvetica, Arial, Sans-Serif; -Webkit-transição: todas as 0.2s facilitam; -Moz-transição: todas as 0.2s facilitam; -ms-transição: todas as 0.2s facilitam; -O-transição: todas as 0.2s facilitam; Transição: todas as 0.2s facilitam; } .InputActive {Border: 2px Solid RGB (237,97,90); -Webkit-transição: todas as 0.2s facilitam; -Moz-transição: todas as 0.2s facilitam; -ms-transição: todas as 0.2s facilitam; -O-transição: todas as 0.2s facilitam; Transição: todas as 0.2s facilitam; } .Labelactive {Position: Absolute; Esquerda: 45px; Top: 115px; Z-Index: 999; Antecedentes: Branco; borda: 2px branco sólido; Cor: RGB (237,97,90); Size da fonte: 10px; -webkit-transform: tradutor (-10px, -23px); -moz-transform: translate (-10px, -23px); -ms-transform: translate (-10px, -23px); -o-transform: tradutor (-10px, -23px); Transform: traduzir (-10px, -23px); -Webkit-transição: todas as 0.2s facilitam; -Moz-transição: todas as 0.2s facilitam; -ms-transição: todas as 0.2s facilitam; -O-transição: todas as 0.2s facilitam; Transição: todas as 0.2s facilitam; } </style> </head> <corpo ng-controller = "formanimationcontroller"> <form ação = "" formulário-animação> <gravador para = "inputDemo"> digite conteúdo </elbel> <input type = "text" id = "inputDemo"/> <plant> </span> </forma " Angular.module ('formanimation', []) .Controller ('formanimationcontroller', function () {}) .directive ('formanimation', ['$ animate', function ($ anima) {return {restrit: 'ea', link: function (escopo, elemento, 'elemento) {) { elemento.find ("input"). addclass ("inputactive"); Element.find ("Label"). RemoveClass ("LabelActive"). AddClass ("LabelStyle");Resumir
Os dois métodos acima refletem apenas o método de implementação. Para estilos de implementação específicos, você pode consultar as renderizações e ajustar o estilo CSS. Espero que o conteúdo deste artigo seja útil para que todos aprendam AngularJs e JS. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar. Obrigado pelo seu apoio ao wulin.com.