Rumah >hujung hadapan web >tutorial js >Sembang mendalam tentang status dan animasi dalam pembelajaran sudut
Artikel ini akan memberi anda pemahaman yang mendalam tentang status dan animasi dalam Angular, memperkenalkan secara ringkas kaedah mencipta animasi, dan bercakap tentang animasi bingkai utama, panggilan balik animasi, animasi boleh guna semula, animasi bersilang dan titik pengetahuan I harap ia akan berguna kepada semua orang.
1 >Keadaan mewakili gaya elemen yang akan digerakkan pada peringkat pergerakan yang berbeza.
2 Jenis keadaanDalam Sudut, terdapat tiga jenis keadaan iaitu : ,
,void
*
custom
: Ini berlaku apabila elemen dicipta dalam ingatan tetapi belum lagi ditambah atau dialih keluar daripada Status DOM [Tutorial berkaitan cadangan: "tutorial sudut
"] void
: Status selepas elemen dimasukkan ke dalam pepohon DOM, atau status elemen yang sudah ada dalam pepohon DOM, atau Dipanggil keadaan lalai
*
: keadaan tersuai Elemen berada pada halaman secara lalai dan bergerak dari satu keadaan ke keadaan lain, seperti melipat dan mengembangkan panel.
custom
Animasi masuk bermaksud elemen tersebut muncul di hadapan pengguna dalam bentuk animasi selepas ia dibuat. Animasi kemasukan Status diwakili oleh , dan aliasnya ialah
void => *
:enter
dan aliasnya ialah Bermula dengan pantas* => void
:leave
BrowserAnimationsModule
2 >
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" @NgModule({ imports: [BrowserAnimationsModule], }) export class AppModule {}3. Mencipta animasi
<!-- 在 index.html 文件中引入 bootstrap.min.css --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<div class="container"> <h2>Todos</h2> <div class="form-group"> <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" /> </div> <ul class="list-group"> <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item"> {{ item }} </li> </ul> </div>
import { Component } from "@angular/core" @Component({ selector: "app-root", templateUrl: "./app.component.html", styles: [] }) export class AppComponent { // todo 列表 todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"] // 添加 todo addItem(input: HTMLInputElement) { this.todos.push(input.value) input.value = "" } // 删除 todo removeItem(index: number) { this.todos.splice(index, 1) } }
kaedah pencetus digunakan untuk mencipta animasi, nyatakan nama animasi
kaedah peralihan digunakan untuk menentukan keadaan gerakan animasi, animasi keluar atau animasi masuk, atau Tentukan animasi keadaan secara automatik.
Kaedah gaya digunakan untuk menetapkan gaya yang sepadan dengan elemen dalam keadaan berbeza
Kaedah animasi digunakan untuk menetapkan parameter gerakan. , seperti gerakan animasi Masa, acara kelewatan, borang gerakan
@Component({ animations: [ // 创建动画, 动画名称为 slide trigger("slide", [ // 指定入场动画 注意: 字符串两边不能有空格, 箭头两边可以有也可以没有空格 // void => * 可以替换为 :enter transition("void => *", [ // 指定元素未入场前的样式 style({ opacity: 0, transform: "translateY(40px)" }), // 指定元素入场后的样式及运动参数 animate(250, style({ opacity: 1, transform: "translateY(0)" })) ]), // 指定出场动画 // * => void 可以替换为 :leave transition("* => void", [ // 指定元素出场后的样式和运动参数 animate(600, style({ opacity: 0, transform: "translateX(100%)" })) ]) ]) ] })Nota: Untuk menetapkan parameter gerakan animasi, anda perlu menukar satu parameter kaedah animasi kepada jenis rentetan
trigger("slide", [ transition(":enter", [ style({ opacity: 0, transform: "translateY(40px)" }), animate(250) ]), transition(":leave", [ animate(600, style({ opacity: 0, transform: "translateX(100%)" })) ]) ])
Animasi bingkai kunci
// 动画执行总时间 延迟时间 (可选) 运动形式 (可选) animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))
keyframes
Panggil balik animasi
transition(":leave", [ animate( 600, keyframes([ style({ offset: 0.3, transform: "translateX(-80px)" }), style({ offset: 1, transform: "translateX(100%)" }) ]) ) ])
untuk mencipta animasi boleh guna semula
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
import { AnimationEvent } from "@angular/animations" start(event: AnimationEvent) { console.log(event) } done(event: AnimationEvent) { console.log(event) }1. Definisi animasi Letakkannya dalam fail berasingan untuk memudahkan panggilan berbilang komponen.
2. Ekstrak definisi animasi khusus untuk memudahkan berbilang panggilan animasi.
import { animate, keyframes, style, transition, trigger } from "@angular/animations" export const slide = trigger("slide", [ transition(":enter", [ style({ opacity: 0, transform: "translateY(40px)" }), animate(250) ]), transition(":leave", [ animate( 600, keyframes([ style({ offset: 0.3, transform: "translateX(-80px)" }), style({ offset: 1, transform: "translateX(100%)" }) ]) ) ]) ])
import { slide } from "./animations" @Component({ animations: [slide] })3. Apabila memanggil animasi, luluskan jumlah masa gerakan, masa tunda dan bentuk gerakan
import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@angular/animations" export const slideInUp = animation([ style({ opacity: 0, transform: "translateY(40px)" }), animate(250) ]) export const slideOutLeft = animation([ animate( 600, keyframes([ style({ offset: 0.3, transform: "translateX(-80px)" }), style({ offset: 1, transform: "translateX(100%)" }) ]) ) ]) export const slide = trigger("slide", [ transition(":enter", useAnimation(slideInUp)), transition(":leave", useAnimation(slideOutLeft)) ])Soal elemen untuk melaksanakan animasi
export const slideInUp = animation( [ style({ opacity: 0, transform: "translateY(40px)" }), animate("{{ duration }} {{ delay }} {{ easing }}") ], { params: { duration: "400ms", delay: "0s", easing: "ease-out" } } )
transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}}))
query
Secara lalai, animasi ibu bapa dan animasi kanak-kanak dilaksanakan mengikut tertib, pertama Untuk melaksanakan animasi induk dan kemudian animasi anak, anda boleh menggunakan kaedah
import { slide } from "./animations" animations: [ slide, trigger("todoAnimations", [ transition(":enter", [ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), // 查询子级动画 使其执行 query("@slide", animateChild()) ]) ]) ]
<div class="container" @todoAnimations> <h2>Todos</h2> <ul class="list-group"> <li @slide (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item" > {{ item }} </li> </ul> </div>
group
Animasi interleaved
trigger("todoAnimations", [ transition(":enter", [ group([ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), query("@slide", animateChild()) ]) ]) ])
Nota: Kaedah stagger hanya boleh digunakan di dalam kaedah pertanyaan
transition(":enter", [ group([ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), query("@slide", stagger(200, animateChild())) ]) ])Animasi keadaan tersuai
state
2 >
Animasi penghalaan<div class="container"> <div class="panel panel-default"> <div class="panel-heading" (click)="toggle()"> 一套框架, 多种平台, 移动端 & 桌面端 </div> <div class="panel-body"> <p> 使用简单的声明式模板,快速实现各种特性。使用自定义组件和大量现有组件,扩展模板语言。在几乎所有的 IDE 中获得针对 Angular 的即时帮助和反馈。所有这一切,都是为了帮助你编写漂亮的应用,而不是绞尽脑汁的让代码“能用”。 </p> <p> 从原型到全球部署,Angular 都能带给你支撑 Google 大型应用的那些高延展性基础设施与技术。 </p> <p> 通过 Web Worker 和服务端渲染,达到在如今(以及未来)的 Web 平台上所能达到的最高速度。 Angular 让你有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型,能适应海量数据需求。 </p> <p> 学会用 Angular 构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。 </p> </div> </div> </div> <style> .container { margin-top: 100px; } .panel-heading { cursor: pointer; } </style>
import { Component } from "@angular/core" @Component({ selector: "app-root", templateUrl: "./app.component.html", styles: [] }) export class AppComponent { isExpended: boolean = false toggle() { this.isExpended = !this.isExpended } }
trigger("expandCollapse", [ // 使用 state 方法定义折叠状态元素对应的样式 state( "collapsed", style({ height: 0, overflow: "hidden", paddingTop: 0, paddingBottom: 0 }) ), // 使用 state 方法定义展开状态元素对应的样式 state("expanded", style({ height: "*", overflow: "auto" })), // 定义展开动画 transition("collapsed => expanded", animate("400ms ease-out")), // 定义折叠动画 transition("expanded => collapsed", animate("400ms ease-in")) ])
<div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
1、为路由添加状态标识,此标识即为路由执行动画时的自定义状态
const routes: Routes = [ { path: "", component: HomeComponent, pathMatch: "full", data: { animation: "one" } }, { path: "about", component: AboutComponent, data: { animation: "two" } }, { path: "news", component: NewsComponent, data: { animation: "three" } } ]
2、通过路由插座对象获取路由状态标识,并将标识传递给动画的调用者,让动画执行当前要执行的状态是什么
<div class="routerContainer" [@routerAnimations]="prepareRoute(outlet)"> <router-outlet #outlet="outlet"></router-outlet> </div>
import { RouterOutlet } from "@angular/router" export class AppComponent { prepareRoute(outlet: RouterOutlet) { return ( outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation ) } }
3、将 routerContainer 设置为相对定位,将它的直接一级子元素设置成绝对定位
/* styles.css */ .routerContainer { position: relative; } .routerContainer > * { position: absolute; left: 0; top: 0; width: 100%; }
4、创建动画
trigger("routerAnimations", [ transition("one => two, one => three, two => three", [ query(":enter", style({ transform: "translateX(100%)", opacity: 0 })), group([ query( ":enter", animate( "0.4s ease-in", style({ transform: "translateX(0)", opacity: 1 }) ) ), query( ":leave", animate( "0.4s ease-out", style({ transform: "translateX(-100%)", opacity: 0 }) ) ) ]) ]), transition("three => two, three => one, two => one", [ query( ":enter", style({ transform: "translateX(-100%)", opacity: 0 }) ), group([ query( ":enter", animate( "0.4s ease-in", style({ transform: "translateX(0)", opacity: 1 }) ) ), query( ":leave", animate( "0.4s ease-out", style({ transform: "translateX(100%)", opacity: 0 }) ) ) ]) ]) ])
更多编程相关知识,请访问:编程视频!!
Atas ialah kandungan terperinci Sembang mendalam tentang status dan animasi dalam pembelajaran sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!