Tidak ada efek sampai Anda pertama kali menambahkan fokus ke kotak input. Lihat gambar di bawah ini:
Kemudian klik salah satu dari mereka, dan fokusnya akan memicu animasi. Hasil animasi ditunjukkan pada Gambar 2:
Masukkan teks kata sandi login di tengah dan akan ditambahkan secara otomatis ke atas (maafkan saya untuk tidak menangkap gambar proses animasi).
Saya mengujinya dan menemukan bahwa hanya browser canggih yang mendukung efek ini (IE hanya mendukung IE10, IE11, dan Edge).
Selanjutnya, saya akan menempelkan kode. Prinsipnya sangat sederhana, yaitu memicu penambahan dan penghapusan nama kelas melalui peristiwa. Animasi spesifik diimplementasikan oleh CSS3, itulah sebabnya browser tingkat rendah tidak mendukungnya.
Contoh Implementasi JS Asli:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> </iteme> <tyle> *{padding: 0; Margin: 0; } .demo {border: 1px solid grey; Lebar: 300px; Tinggi: 200px; Posisi: kerabat; Kiri: 200px; TOP: 200PX; -webkit-transisi: semua 0,3S linear; -Moz-transisi: semua 0,3S linear; -MS-transisi: semua 0,3S linear; --transisi: semua 0,3S linear; Transisi: Semua 0,3S linear; } .demo input {width: 200px; Tinggi: 100px; Posisi: Absolute; Kiri: 50px; Atas: 50px; -webkit-transisi: semua 0,3S linear; -Moz-transisi: semua 0,3S linear; -MS-transisi: semua 0,3S linear; --transisi: semua 0,3S linear; Transisi: Semua 0,3S linear; } .demo label {position: absolute; Atas: 100px; Kiri: 80px; Ukuran font: 14px; -webkit-transisi: semua 0,3S linear; -Moz-transisi: semua 0,3S linear; -MS-transisi: semua 0,3S linear; --transisi: semua 0,3S linear; Transisi: Semua 0,3S linear; } .ActiveDemo {border: 1px #fd715a solid; -webkit-transisi: semua kemudahan 0,3; -Moz-transisi: semua kemudahan 0,3; -MS-transisi: semua kemudahan 0,3s; --transisi: semua kemudahan 0,3; Transisi: Semua kemudahan 0,3; } .ActiveInput {border: 1px #fd715a solid; -webkit-transisi: semua kemudahan 0,3; -Moz-transisi: semua kemudahan 0,3; -MS-transisi: semua kemudahan 0,3s; --transisi: semua kemudahan 0,3; Transisi: Semua kemudahan 0,3; } .Activelabel {font-size: 10px; Warna: #FD715A; Latar Belakang: Putih; -webkit-transform: translate (-20px, -58px); -Moz-transform: translate (-20px, -58px); -MS-Transform: translate (-20px, -58px); -MS-Transform: translate (-20px, -58px); -o-transform: translate (-20px, -58px); transformasi: translate (-20px, -58px); -webkit-transisi: semua 0,3S linear; -Moz-transisi: semua 0,3S linear; -Ms-transisi: semua 0,3 linier; --transisi: semua 0,3S linear; --transisi: semua 0,3S linear; Transisi: Semua 0,3S linear; } </style></head><body> <div> <input type="text" id="inputDemo"/> <label for="inputDemo">Please enter content</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+= "activeemo"; 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*/, ''); label.className = label.classname.replace (// s*ActiveLabel/s*/, '');Berikut ini adalah efek sederhana yang diimplementasikan menggunakan Angular. Prinsipnya sangat sederhana, yaitu mengoperasikan DOM dalam instruksi untuk mengimplementasikan animasi.
Contoh Implementasi 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-animate.js" type = "Text/JavaScript"> </script> <tyle> *{padding: 0; Margin: 0; } .container {width: 445px; Tinggi: 370px; Border-left: 10px solid #d4d4d4; Posisi: kerabat; Kiri: 100px; Atas: 100px; } .container input {position: absolute; Atas: 100px; Kiri: 25px; Tinggi: 40px; Lebar: 385px; } .container span {width: 80px; Tinggi: 25px; Ukuran font: 10px; Latar belakang: RGB (237,97,83); Warna: Putih; Posisi: Absolute; Kiri: 300px; Atas: 109px; Line-Height: 25px; Text-Align: .container .labelstyle {position: absolute; Kiri: 45px; Atas: 115px; Ukuran font: 14px; Warna: #929292; z-index: 999; Font: "Helvetica Neue", Helvetica, Arial, Sans-Serif; -webkit-transisi: semua kemudahan 0,2; -Moz-transisi: semua kemudahan 0,2; -Ms-transisi: semua kemudahan 0,2; --transisi: semua kemudahan 0,2; Transisi: Semua kemudahan 0,2; } .inputActive {border: 2px solid rgb (237,97,90); -webkit-transisi: semua kemudahan 0,2; -Moz-transisi: semua kemudahan 0,2; -Ms-transisi: semua kemudahan 0,2; --transisi: semua kemudahan 0,2; Transisi: Semua kemudahan 0,2; } .labelActive {position: absolute; Kiri: 45px; Atas: 115px; z-index: 999; Latar Belakang: Putih; Perbatasan: 2px Solid White; Warna: RGB (237,97,90); Ukuran font: 10px; -webkit-transform: translate (-10px, -23px); -Moz-Transform: translate (-10px, -23px); -MS-Transform: translate (-10px, -23px); -o-transform: translate (-10px, -23px); transformasi: translate (-10px, -23px); -webkit-transisi: semua kemudahan 0,2; -Moz-transisi: semua kemudahan 0,2; -Ms-transisi: semua kemudahan 0,2; --transisi: semua kemudahan 0,2; Transisi: Semua kemudahan 0,2; } </style></head><body ng-controller="formAnimationController"> <form action="" form-animation> <label for="inputDemo">Please enter content</label> <input type="text" id="inputDemo" /> <span>Please fill in content</span> </form></body><script> angular.module ('formanimation', []) .controller ('formanimationController', function () {}) .directive ('formanimation', ['$ animate', function ($ animate) {return {'ea', link: function (scope, element, element, attr) {{"{{" {{"{{" {{"{{{{" {{{{{"{{{{{{" {{{{{{{{") element.find ("input"). AddClass ("InputActive"); element.find ("Label"). RemoveClass ("LabelActive"). AddClass ("LabelStyle");Meringkaskan
Dua metode di atas hanya mencerminkan metode implementasi. Untuk gaya implementasi tertentu, Anda dapat merujuk pada rendering dan menyesuaikan gaya CSS. Saya berharap konten artikel ini akan membantu semua orang untuk belajar AngularJS dan JS. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi. Terima kasih atas dukungan Anda ke wulin.com.