1. Apa yang dimaksud dengan keadaan
? Negara mewakili gaya elemen yang akan digerakkan pada berbagai tahapan gerakan. [Tutorial terkait yang direkomendasikan: "tutorial sudut"]
2. Tipe status
Di Angular, ada tiga tipe status: void , * , custom 
void : Keadaan ini terjadi ketika elemen dibuat di memori tetapi belum ditambahkan ke DOM atau elemen dikeluarkan dari DOM
* : Keadaan setelah elemen dimasukkan ke dalam pohon DOM, atau merupakan elemen yang sudah ada di pohon DOM. Status pohon DOM, juga disebut status default
custom : status kustom, elemen ada di halaman secara default dan berpindah dari satu status ke status lainnya, seperti melipat dan memperluas panel.
3. Animasi masuk dan keluar.
Animasi masuk berarti elemen muncul di hadapan pengguna dalam bentuk animasi setelah dibuat. Keadaan animasi masuk diwakili oleh void => * , dan aliasnya adalah :enter
Animasi keluar mengacu pada animasi perpisahan yang dilakukan sebelum elemen dihapus. Status animasi keluar adalah * => void , dan aliasnya adalah :leave
1. Sebelum menggunakan fungsi animasi, Anda perlu memperkenalkan modul animasi yaitu BrowserAnimationsModule
impor { BrowserAnimationsModule } dari "@angular/platform-browser/animations"
@NgModule({
impor: [BrowserAnimationsModule],
})
kelas ekspor AppModule {} 2. Analisis kode default, tugas penghapusan yang harus dilakukan dan tugas penambahan
<!-- Memperkenalkan bootstrap.min.css di file index.html --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<div class="container">
<h2>Semua hal</h2>
<div class="form-group">
<input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />
</div>
<ul class="daftar-grup">
<li (klik)="removeItem(i)" *ngFor="biarkan item dari semua tugas; biarkan i = indeks" class="list-group-item">
{{barang }}
</li>
</ul>
</div> impor { Komponen } dari "@angular/core"
@Komponen({
pemilih: "root-aplikasi",
templateUrl: "./app.component.html",
gaya: []
})
kelas ekspor Komponen Aplikasi {
// daftar tugas yang harus dilakukan: string[] = ["Belajar Angular", "Belajar RxJS", "Belajar NgRx"]
// tambahkan tugas
addItem(masukan: HTMLInputElement) {
this.todos.push(input.nilai)
masukan.nilai = ""
}
// Hapus tugas
hapusItem(indeks: nomor) {
this.todos.splice(indeks, 1)
}
} 3. Membuat animasi.
Metode pemicu digunakan untuk membuat animasi, dan
metode transisi digunakan untuk menentukan nama animasi. Metode transisi digunakan untuk menentukan status gerakan animasi, animasi keluar atau animasi masuk, atau status kustom animasi.
Metode gaya digunakan untuk mengatur gaya yang sesuai dengan elemen dalam keadaan berbeda.
Metode animasi digunakan untuk mengatur parameter gerakan, seperti waktu gerakan animasi, peristiwa tertunda, dan bentuk gerakan
@Component({
animasi: [
//Buat animasi, nama animasinya adalah slide
pemicu("geser", [
//Tentukan animasi masuk. Catatan: Tidak boleh ada spasi di kedua sisi string, dan boleh ada atau tidak ada spasi di kedua sisi panah. // void => * dapat diganti dengan: enter
transisi("batal => *", [
// Tentukan gaya elemen sebelum memasuki style({ opacity: 0, transform: "translateY(40px)" }),
//Tentukan parameter gaya dan gerakan elemen setelah memasuki adegan animate(250, style({ opacity: 1, transform: "translateY(0)" }))
]),
//Tentukan animasi keluar// * => void dapat diganti dengan:leave
transisi("* => batal", [
//Tentukan parameter gaya dan gerakan elemen setelah muncul animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
])
])
]
}) Catatan: Anda tidak perlu menentukan status default elemen dalam animasi masuk. Angular akan menghapus status kosong sebagai
pemicu status default("slide", [
transisi(":masuk", [
gaya({ opasitas: 0, transformasi: "translateY(40px)" }),
menghidupkan (250)
]),
transisi(":pergi", [
bernyawa(600, gaya({ opasitas: 0, transformasi: "translateX(100%)" }))
])
]) Catatan: Untuk mengatur parameter gerakan animasi, Anda perlu mengubah satu parameter metode animate menjadi tipe string
// total waktu eksekusi animasi waktu tunda (opsional) bentuk gerakan (opsional)
animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" })) Animasi keyframe ditentukan menggunakan metode keyframes
transisi(":pergi", [
menghidupkan(
600,
bingkai utama([
gaya({ offset: 0,3, transformasi: "translateX(-80px)" }),
gaya({ offset: 1, transformasi: "translateX(100%)" })
])
)
]) Angular menyediakan dua fungsi callback terkait animasi, masing-masing saat animasi dimulai dan setelah animasi selesai.
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
impor { AnimationEvent } dari "@angular/animations"
mulai(acara: Acara Animasi) {
konsol.log(acara)
}
selesai(acara: AnimationEvent) {
konsol.log(acara)
} 1. Tempatkan definisi animasi dalam file terpisah untuk memfasilitasi beberapa panggilan komponen.
impor { animasi, bingkai utama, gaya, transisi, pemicu } dari "@angular/animasi"
ekspor const slide = trigger("slide", [
transisi(":masuk", [
gaya({ opasitas: 0, transformasi: "translateY(40px)" }),
menghidupkan (250)
]),
transisi(":pergi", [
menghidupkan(
600,
bingkai utama([
gaya({ offset: 0,3, transformasi: "translateX(-80px)" }),
gaya({ offset: 1, transformasi: "translateX(100%)" })
])
)
])
]) impor { slide } dari "./animasi"
@Komponen({
animasi: [slide]
}) 2. Ekstrak definisi animasi tertentu untuk memfasilitasi beberapa panggilan animasi.
impor {animate, animation, keyframes, style, transisi, trigger, useAnimation} dari "@angular/animations"
ekspor const slideInUp = animasi([
gaya({ opasitas: 0, transformasi: "translateY(40px)" }),
menghidupkan (250)
])
ekspor const slideOutLeft = animasi([
menghidupkan(
600,
bingkai utama([
gaya({ offset: 0,3, transformasi: "translateX(-80px)" }),
gaya({ offset: 1, transformasi: "translateX(100%)" })
])
)
])
ekspor const slide = trigger("slide", [
transisi(":masuk", gunakanAnimasi(slideInUp)),
transisi(":keluar", useAnimation(slideOutLeft))
]) 3. Saat memanggil animasi, transfer total waktu gerak, waktu tunda, dan bentuk gerak
ekspor const slideInUp = animation(
[
gaya({ opasitas: 0, transformasi: "translateY(40px)" }),
menghidupkan("{{ durasi }} {{ penundaan }} {{ pelonggaran }}")
],
{
parameter: {
durasi: "400 ms",
penundaan: "0 detik",
pelonggaran: "kelonggaran"
}
}
) elemen kueri transisi(":enter", useAnimation(slideInUp, {params: {delay: "1s"}})) Angular menyediakan metode query untuk menemukan elemen dan membuat animasi untuk elemen tersebut
impor { slide } dari "./animasi"
animasi: [
menggeser,
trigger("todoAnimasi", [
transisi(":masuk", [
permintaan("h2", [
gaya({ transform: "translateY(-30px)" }),
menghidupkan (300)
]),
// Kueri animasi anak untuk mengeksekusi query("@slide", animateChild())
])
])
] <div class="wadah" @todoAnimations>
<h2>Semua hal</h2>
<ul class="daftar-grup">
<li
@menggeser
(klik)="hapusItem(i)"
*ngFor="biarkan item dari semua tugas; biarkan i = indeks"
kelas="daftar-grup-item"
>
{{barang }}
</li>
</ul>
</div> Secara default, animasi induk dan animasi anak dijalankan secara berurutan. Animasi induk dijalankan terlebih dahulu, lalu animasi anak dijalankan. Anda dapat menggunakan metode group untuk menjadikannya
pemicu paralel("todoAnimations", [.
transisi(":masuk", [
kelompok([
permintaan("h2", [
gaya({ transform: "translateY(-30px)" }),
menghidupkan (300)
]),
kueri("@slide", animateChild())
])
])
]) Angular menyediakan metode stagger untuk menunda eksekusi animasi setiap elemen secara bergantian ketika beberapa elemen menjalankan animasi yang sama pada waktu yang sama.
transisi(":masuk", [
kelompok([
permintaan("h2", [
gaya({ transform: "translateY(-30px)" }),
menghidupkan (300)
]),
query("@slide", stagger(200, animateChild()))
])
]) Catatan: Metode stagger hanya dapat menggunakan di dalam metode kueri.
Angular menyediakan metode state untuk mendefinisikan status.
1. Analisis kode default
<div class="container">
<div class="panel panel-default">
<div class="panel-heading" (klik)="toggle()">
Satu kerangka kerja, berbagai platform, seluler & desktop</div>
<div class="panel-tubuh">
<p>
Gunakan templat deklaratif sederhana untuk mengimplementasikan berbagai fitur dengan cepat. Perluas bahasa templat dengan komponen khusus dan beragam komponen yang ada. Dapatkan dukungan untuk Angular di hampir semua IDE
untuk bantuan dan umpan balik instan. Semua ini untuk membantu Anda menulis aplikasi yang indah, daripada memeras otak untuk membuat kode "berfungsi".
</p>
<p>
Dari prototipe hingga penerapan global, Angular dapat memberikan Anda dukungan untuk Google
Infrastruktur dan teknologi yang sangat skalabel untuk aplikasi skala besar.
</p>
<p>
Jangkau web hari ini (dan besok) dengan Web Worker dan rendering sisi server
Kecepatan tertinggi yang dapat dicapai pada platform. Angular memberi Anda kontrol efektif atas skalabilitas. Berdasarkan RxJS, Immutable.js, dan model push lainnya, model ini dapat beradaptasi dengan kebutuhan data yang sangat besar.
</p>
<p>
Belajar menggunakan Sudut
Bangun aplikasi lalu gunakan kembali kode dan kemampuan ini dalam aplikasi di banyak platform berbeda -
Web, web seluler, aplikasi seluler, aplikasi asli, dan aplikasi asli desktop.
</p>
</div>
</div>
</div>
<gaya>
.wadah {
margin-atas: 100 piksel;
}
.panel-judul {
kursor: penunjuk;
}
</style> impor { Komponen } dari "@angular/core"
@Komponen({
pemilih: "root-aplikasi",
templateUrl: "./app.component.html",
gaya: []
})
kelas ekspor Komponen Aplikasi {
isExpended: boolean = salah
beralih() {
ini.isExpended = !ini.isExpended
}
} 2. Buat pemicu
animasi
("expandCollapse", [
// Gunakan metode status untuk menentukan gaya yang sesuai dengan elemen status terlipat state(
"runtuh",
gaya({
tinggi: 0,
meluap: "tersembunyi",
bantalanAtas: 0,
bantalanBawah: 0
})
),
// Gunakan metode status untuk menentukan gaya yang sesuai dengan elemen status yang diperluas state("expanded", style({ height: "*", overflow: "auto" })),
// Tentukan transisi animasi perluasan("collapsed => diperluas", animate("400ms ease-out")),
// Tentukan transisi animasi lipat("diperluas => diciutkan", animate("400ms ease-in"))
]) <div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
1. Tambahkan pengidentifikasi status ke rute. Pengidentifikasi ini adalah status khusus saat rute melakukan animasi
rute const: Rute = [
{
jalur: "",
komponen: Komponen Rumah,
pathMatch: "penuh",
data: {
animasi: "satu"
}
},
{
jalur: "tentang",
komponen: Tentang Komponen,
data: {
animasi: "dua"
}
},
{
jalur: "berita",
komponen: Komponen Berita,
data: {
animasi: "tiga"
}
}
] 2. Dapatkan pengidentifikasi status perutean melalui objek soket perutean, dan teruskan pengidentifikasi tersebut ke pemanggil animasi agar animasi dapat mengeksekusi keadaan saat ini yang akan dieksekusi
<div class="routerContainer" [@routerAnimations]=" persiapanRoute(outlet)" > <router-outlet #outlet="outlet"></router-outlet> </div>
impor { RouterOutlet } dari "@angular/router"
kelas ekspor Komponen Aplikasi {
persiapanRoute(outlet: RouterOutlet) {
kembali (
outlet &&
outlet.activatedRouteData &&
outlet.activatedRouteData.animation
)
}
} 3. Setel routerContainer ke posisi relatif, dan setel elemen anak tingkat pertama langsungnya ke posisi absolut
/* style.css */
.routerContainer {
posisi: relatif;
}
.routerContainer > * {
posisi: mutlak;
kiri: 0;
atas: 0;
lebar: 100%;
} 4. Buat pemicu animasi
("routerAnimations", [
transisi("satu => dua, satu => tiga, dua => tiga", [
query(":enter", style({ transform: "translateX(100%)", opacity: 0 })),
kelompok([
pertanyaan(
":memasuki",
menghidupkan(
"kemudahan masuk 0,4 detik",
gaya({ transformasi: "translateX(0)", opasitas: 1 })
)
),
pertanyaan(
":meninggalkan",
menghidupkan(
"kelonggaran 0,4 detik",
gaya({
transformasi: "translateX(-100%)",
Opasitas: 0
})
)
)
])
]),
transisi("tiga => dua, tiga => satu, dua => satu", [
pertanyaan(
":memasuki",
gaya({ transform: "translateX(-100%)", opasitas: 0 })
),
kelompok([
pertanyaan(
":memasuki",
menghidupkan(
"kemudahan masuk 0,4 detik",
gaya({ transformasi: "translateX(0)", opasitas: 1 })
)
),
pertanyaan(
":meninggalkan",
menghidupkan(
"kelonggaran 0,4 detik",
gaya({
transformasi: "translateX(100%)",
Opasitas: 0
})
)
)
])
])
]) Untuk pengetahuan lebih lanjut terkait pemrograman, silakan kunjungi: Video Pemrograman! !
Di atas adalah apa itu status? Pelajari lebih lanjut tentang animasi di Angular. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di situs web PHP Mandarin!