Нет никакого эффекта, пока вы сначала не добавите фокус в поле ввода. Смотрите изображение ниже:
Затем нажмите на любой из них, и фокус запустит анимацию. Результат анимации показан на рисунке 2:
Введите текст пароля входа в середину и будет автоматически добавлен в верхнюю часть (простите меня, чтобы не запечатлеть изображение процесса анимации).
Я проверил его и обнаружил, что только передовые браузеры поддерживают этот эффект (т.е. только поддерживает IE10, IE11 и Edge).
Далее я вставлю код. Принцип очень прост, который состоит в том, чтобы вызвать добавление и удаление имен классов через события. Конкретная анимация реализована CSS3, поэтому браузеры низкого уровня не поддерживают ее.
Пример реализации Native JS:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{Padding: 0; поля: 0; } .demo {border: 1px solid grey; Ширина: 300px; Высота: 200px; позиция: относительно; Слева: 200px; Верх: 200px; -Вебкит-трансляция: все 0,3 с линейно; -Моз-трансляция: все 0,3 с линейно; -Сс-транзирование: все 0,3 с линейно; -О-транзиция: все 0,3 с линейно; Переход: все 0,3 с линейно; } .demo input {width: 200px; высота: 100px; позиция: абсолютно; Слева: 50px; Верх: 50px; -Вебкит-трансляция: все 0,3 с линейно; -Моз-трансляция: все 0,3 с линейно; -Сс-транзирование: все 0,3 с линейно; -О-транзиция: все 0,3 с линейно; Переход: все 0,3 с линейно; } .demo label {position: Absolute; Верх: 100px; Слева: 80px; размер шрифта: 14px; -Вебкит-трансляция: все 0,3 с линейно; -Моз-трансляция: все 0,3 с линейно; -Сс-транзирование: все 0,3 с линейно; -О-транзиция: все 0,3 с линейно; Переход: все 0,3 с линейно; } .ActiveDemo {border: 1px #fd715a solid; -Вобкит-трансляция: все 0,3 с легкостью; -Моз-трансляция: все 0,3 с легкостью; -Сс-транзирование: все 0,3 с легкостью; -О-транзиция: все 0,3 с легкостью; Переход: все 0,3 с легкостью; } .ActiveInput {border: 1px #fd715a solid; -Вобкит-трансляция: все 0,3 с легкостью; -Моз-трансляция: все 0,3 с легкостью; -Сс-транзирование: все 0,3 с легкостью; -О-транзиция: все 0,3 с легкостью; Переход: все 0,3 с легкостью; } .Activelabel {font-size: 10px; Цвет: #FD715A; Фон: белый; -Webkit-transform: translate (-20px, -58px); -Моз-трансформ: перевод (-20px, -58px); -ms-transform: translate (-20px, -58px); -ms-transform: translate (-20px, -58px); -o-transform: translate (-20px, -58px); преобразование: перевод (-20px, -58px); -Вебкит-трансляция: все 0,3 с линейно; -Моз-трансляция: все 0,3 с линейно; -Сс-транзирование: все 0,3 линейно; -О-транзиция: все 0,3 с линейно; -О-транзиция: все 0,3 с линейно; Переход: все 0,3 с линейно; } </style> </head> <body> <viv> <input type = "text" id = "inputdemo"/> <label для = "inputdemo"> Пожалуйста, введите содержимое </label> </div> </body> <script> var addevent = function (obj, callback) {if (obj.addeventlister) {abj.AddEl -levlecter (eventList) (oversback) {if (obj.addeventLister) {ovack). 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*/, ''); ');Ниже приводится простой эффект, реализованный с использованием углового. Принцип очень прост, который состоит в том, чтобы управлять DOM в инструкции по реализации анимации.
Пример реализации 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> <script src = "lib/angular- angular-" type = "text/javascript"> </script> <style> *{Padding: 0; поля: 0; } .container {width: 445px; Высота: 370px; РЕШЕНЬ-ЛЕРФ: 10PX SOLID #D4D4D4; позиция: относительно; Слева: 100px; Верх: 100px; } .container input {position: Absolute; Верх: 100px; Слева: 25px; Высота: 40px; Ширина: 385px; } .container span {width: 80px; Высота: 25px; размер шрифта: 10px; Предпосылки: RGB (237,97,83); Цвет: белый; позиция: абсолютно; Слева: 300px; Верх: 109px; высота линии: 25px; Text-align: .container .labelstyle {позиция: абсолют; Слева: 45px; Верх: 115px; размер шрифта: 14px; Цвет: #929292; Z-Index: 999; Шрифт: «Helvetica neue», Helvetica, Arial, Sans-Serif; -Вобкит-трансляция: все 0,2 с легкостью; -Моз-трансляция: все 0,2 с легкостью; -Сс-транзирование: все 0,2 с легкостью; -О-транзиция: все 0,2 с легкостью; Переход: все 0,2 с легкостью; } .InputActive {Border: 2px Solid RGB (237,97,90); -Вобкит-трансляция: все 0,2 с легкостью; -Моз-трансляция: все 0,2 с легкостью; -Сс-транзирование: все 0,2 с легкостью; -О-транзиция: все 0,2 с легкостью; Переход: все 0,2 с легкостью; } .labelactaint {position: Absolute; Слева: 45px; Верх: 115px; Z-Index: 999; Фон: белый; Граница: 2px сплошной белый; Цвет: RGB (237,97,90); размер шрифта: 10px; -Webkit-transform: translate (-10px, -23px); -moz-transform: translate (-10px, -23px); -ms-transform: translate (-10px, -23px); -o-transform: translate (-10px, -23px); преобразование: перевод (-10px, -23px); -Вобкит-трансляция: все 0,2 с легкостью; -Моз-трансляция: все 0,2 с легкостью; -Сс-транзирование: все 0,2 с легкостью; -О-транзиция: все 0,2 с легкостью; Переход: все 0,2 с легкостью; } </style> </head> <body ng-controller = "formanimationController"> <form action = "" "form-animation> <label for =" inputDemo "> Пожалуйста, введите Content </label> <input type = text" id = "inputDemo"/> <prap> Пожалуйста, заполните содержание </span> </form> </body> <cript> Angular.Module ('formanimation', []) .controller ('formanimationController', function () {}) .directive ('formanimation', ['$ anitimate', function ($ antimate) {return {Restict: 'ea', link: function (scope, element, attr) {element.find ("input"). element.find ("input"). addclass ("inputainte"); element.find ("label"). removeclass ("labelactive"). addclass ("labelstyle");Суммировать
Вышеуказанные два метода отражают только метод реализации. Для конкретных стилей реализации вы можете обратиться к визуализациям и настроить стиль CSS. Я надеюсь, что содержание этой статьи будет полезно для всех, чтобы выучить AngularJS и JS. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения. Спасибо за поддержку Wulin.com.