입력 상자에 초점을 먼저 추가 할 때까지 영향은 없습니다. 아래 그림을 참조하십시오.
그런 다음 그들 중 하나를 클릭하면 초점이 애니메이션을 트리거합니다. 애니메이션의 결과는 그림 2에 나와 있습니다.
중간에 로그인 비밀번호 텍스트를 입력하면 상단에 자동으로 추가됩니다 (애니메이션 프로세스의 그림을 캡처하지 않도록 용서하십시오).
나는 그것을 테스트 한 결과 고급 브라우저만이 효과를 지원한다는 것을 발견했습니다 (즉, IE10, IE11 및 Edge 만 지원합니다).
다음으로 코드를 붙여 넣을 것입니다. 원리는 매우 간단하며 이벤트를 통해 클래스 이름의 추가 및 삭제를 트리거하는 것입니다. 특정 애니메이션은 CSS3에 의해 구현되므로 저수준 브라우저가 지원하지 않는 이유입니다.
기본 JS 구현 예 :
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{패딩 : 0; 여백 : 0; } .demo {테두리 : 1px Solid Grey; 너비 : 300px; 높이 : 200px; 위치 : 상대; 왼쪽 : 200px; 상단 : 200px; -webkit-transition : 모든 0.3s 선형; -Moz-transition : 모든 0.3S 선형; -ms-transition : 모든 0.3s 선형; -O- 전달 : 모든 0.3S 선형; 전환 : 모든 0.3S 선형; } .demo 입력 {너비 : 200px; 높이 : 100px; 위치 : 절대; 왼쪽 : 50px; 상단 : 50px; -webkit-transition : 모든 0.3s 선형; -Moz-transition : 모든 0.3S 선형; -ms-transition : 모든 0.3s 선형; -O- 전달 : 모든 0.3S 선형; 전환 : 모든 0.3S 선형; } .demo 레이블 {위치 : 절대; 상단 : 100px; 왼쪽 : 80px; 글꼴 크기 : 14px; -webkit-transition : 모든 0.3s 선형; -Moz-transition : 모든 0.3S 선형; -ms-transition : 모든 0.3s 선형; -O- 전달 : 모든 0.3S 선형; 전환 : 모든 0.3S 선형; } .ActivedEmo {Border : 1px #fd715a Solid; -webkit-transition : 모든 0.3 초의 용이성; -Moz-transition : 모든 0.3 초의 용이성; -ms-transition : 모든 0.3 초의 용이성; -o-ransition : 모든 0.3 초의 용이성; 전환 : 모든 0.3 초의 용이성; } .ActiveInput {테두리 : 1px #fd715a Solid; -webkit-transition : 모든 0.3 초의 용이성; -Moz-transition : 모든 0.3 초의 용이성; -ms-transition : 모든 0.3 초의 용이성; -o-ransition : 모든 0.3 초의 용이성; 전환 : 모든 0.3 초의 용이성; } .Activelabel {font-size : 10px; 색상 : #FD715A; 배경 : 흰색; -webkit-transform : 번역 (-20px, -58px); -moz 변환 : 번역 (-20px, -58px); -ms-transform : 번역 (-20px, -58px); -ms-transform : 번역 (-20px, -58px); -o-transform : 번역 (-20px, -58px); 변환 : 번역 (-20px, -58px); -webkit-transition : 모든 0.3s 선형; -Moz-transition : 모든 0.3S 선형; -ms-transition : 모든 0.3 선형; -O- 전달 : 모든 0.3S 선형; -O- 전달 : 모든 0.3S 선형; 전환 : 모든 0.3S 선형; } </style> </head> <body> <div> <입력 유형 = "text"id = "inputdemo"/<label for = "inputdemo"> 컨텐츠를 입력하십시오 </label> </div> </body> <cript> var addevent = function (obj, event, callback) {if (obj.adeventListener)} if (obj.attachevent) {obj.attachevent ( 'on'+event, 콜백)}}; var demo = document.querySelector ( ". Demo"); var input = document.querySelector ( "#inputDemo"); var label = document.querySelector ( ". 데모 레이블"); addEvent (입력, "포커스", function () {demo.className+= "activedEmo"; this.className+= "activeInput"; label.className+= "activelabel";}); addEvent (입력, 'blur', function () {this.className = this.className.replace (// s*activeInput/s*/, ''); label.className = label.className.replace (// s*activelabel/s*/, ''); label.classname.classname.replace (// activelabel/, '); demo.classname = demo.classname.replace (// s*activedemo/s*/, '') </script> </html>다음은 Angular를 사용하여 구현 한 간단한 효과입니다. 원리는 매우 간단하며, 이는 지침에서 DOM을 사용하여 애니메이션을 구현하는 것입니다.
AngularJS 구현 예 :
<! docType html> <html lang = "en"ng-app = "formanimation"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js"tapt/javascript "> type = "text/javaScript"> </script> <tyle> *{패딩 : 0; 여백 : 0; } .Container {너비 : 445px; 높이 : 370px; 좌파 : 10px 고체 #d4d4d4; 위치 : 상대; 왼쪽 : 100px; 상단 : 100px; } .Container 입력 {위치 : 절대; 상단 : 100px; 왼쪽 : 25px; 높이 : 40px; 너비 : 385px; } .container span {너비 : 80px; 높이 : 25px; 글꼴 크기 : 10px; 배경 : RGB (237,97,83); 색상 : 흰색; 위치 : 절대; 왼쪽 : 300px; 상단 : 109px; 라인 높이 : 25px; 텍스트-정렬 : .Container .LabelStyle {위치 : 절대; 왼쪽 : 45px; 상단 : 115px; 글꼴 크기 : 14px; 색상 : #929292; Z- 인덱스 : 999; 글꼴 : "Helvetica Neue", Helvetica, Arial, Sans-serif; -webkit-transition : 모든 0.2S 용이성; -Moz-transition : 모든 0.2S 용이성; -ms-transition : 모든 0.2s 용이성; -o-ransition : 모든 0.2S 용이성; 전환 : 모든 0.2 초의 용이성; } .inputActive {Border : 2PX Solid RGB (237,97,90); -webkit-transition : 모든 0.2S 용이성; -Moz-transition : 모든 0.2S 용이성; -ms-transition : 모든 0.2s 용이성; -o-ransition : 모든 0.2S 용이성; 전환 : 모든 0.2 초의 용이성; } .LabelActive {위치 : 절대; 왼쪽 : 45px; 상단 : 115px; Z- 인덱스 : 999; 배경 : 흰색; 테두리 : 2px 솔리드 흰색; 색상 : RGB (237,97,90); 글꼴 크기 : 10px; -webkit-transform : 번역 (-10px, -23px); -Moz 변환 : 번역 (-10px, -23px); -ms-transform : 번역 (-10px, -23px); -o-transform : 번역 (-10px, -23px); 변환 : 번역 (-10px, -23px); -webkit-transition : 모든 0.2S 용이성; -Moz-transition : 모든 0.2S 용이성; -ms-transition : 모든 0.2s 용이성; -o-ransition : 모든 0.2S 용이성; 전환 : 모든 0.2 초의 용이성; } </style> </head> <body ng-controller = "formanimationController"> <form action = ""form-animation> <label for = "inputdemo"> 컨텐츠를 입력하십시오 </label> <입력 유형 = "ind ="inputdemo "/> <span> 작성 </body </span> </span> </span> </span> </body> Angular.Module ( 'Formanimation', []) .controller ( 'FormanimationController', function () {}) .Directive ( 'formanimation', [ '$ animate', function ($ animate) {returic : 'ea', link : 함수 (scope, element, attr) {element.find ( ") 요소 ( "입력"). addClass ( "inputActive"); removeClass ( "labelStyle"). find.find ( "입력"). 요소 ( "label"). removeClass ( "lableActive"). addClass ( "labelStyle")}}}) </script> </html>요약
위의 두 가지 방법은 구현 방법 만 반영합니다. 특정 구현 스타일의 경우 렌더링을 참조하고 CSS 스타일을 조정할 수 있습니다. 이 기사의 내용이 AngularJS와 JS를 배우는 데 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다. Wulin.com을 지원 해주셔서 감사합니다.