真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

angular狀態(tài)和動畫是什么

本篇內(nèi)容主要講解“angular狀態(tài)和動畫是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“angular狀態(tài)和動畫是什么”吧!

創(chuàng)新互聯(lián)建站企業(yè)建站,10多年網(wǎng)站建設(shè)經(jīng)驗，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計，有多年建站和網(wǎng)站代運(yùn)營經(jīng)驗，設(shè)計師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對于網(wǎng)站制作、成都網(wǎng)站設(shè)計中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動的思維在網(wǎng)頁中充分展現(xiàn)，通過對客戶行業(yè)精準(zhǔn)市場調(diào)研，為客戶提供的解決方案。

狀態(tài)

1、什么是狀態(tài)

狀態(tài)表示的是要進(jìn)行運(yùn)動的元素在運(yùn)動的不同時期所呈現(xiàn)的樣式。

angular狀態(tài)和動畫是什么

2、狀態(tài)的種類

在 Angular 中，有三種類型的狀態(tài)，分別為：void、*、custom
angular狀態(tài)和動畫是什么
void：當(dāng)元素在內(nèi)存中創(chuàng)建好但尚未被添加到 DOM 中或?qū)⒃貜?DOM 中刪除時會發(fā)生此狀態(tài) 

*：元素被插入到 DOM 樹之后的狀態(tài)，或者是已經(jīng)在DOM樹中的元素的狀態(tài)，也叫默認(rèn)狀態(tài)

custom：自定義狀態(tài)，元素默認(rèn)就在頁面之中，從一個狀態(tài)運(yùn)動到另一個狀態(tài)，比如面板的折疊和展開。

3、進(jìn)出場動畫

進(jìn)場動畫是指元素被創(chuàng)建后以動畫的形式出現(xiàn)在用戶面前，進(jìn)場動畫的狀態(tài)用 void => * 表示，別名為 :enter

angular狀態(tài)和動畫是什么
出場動畫是指元素在被刪除前執(zhí)行的一段告別動畫，出場動畫的狀態(tài)用 * => void，別名為 :leave

angular狀態(tài)和動畫是什么

快速上手

1、在使用動畫功能之前，需要引入動畫模塊，即 BrowserAnimationsModule

import { BrowserAnimationsModule } from "@angular/platform-browser/animations"

@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule {}

2、默認(rèn)代碼解析，todo 之刪除任務(wù)和添加任務(wù)



  
Todos

  
    
  
              {{ item }}         
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)
  }
}

3、創(chuàng)建動畫

@Component({
  animations: [
    // 創(chuàng)建動畫, 動畫名稱為 slide
    trigger("slide", [
      // 指定入場動畫 注意: 字符串兩邊不能有空格, 箭頭兩邊可以有也可以沒有空格
      // void => * 可以替換為 :enter
      transition("void => *", [
        // 指定元素未入場前的樣式
        style({ opacity: 0, transform: "translateY(40px)" }),
        // 指定元素入場后的樣式及運(yùn)動參數(shù)
        animate(250, style({ opacity: 1, transform: "translateY(0)" }))
      ]),
      // 指定出場動畫
      // * => void 可以替換為 :leave
      transition("* => void", [
        // 指定元素出場后的樣式和運(yùn)動參數(shù)
        animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
      ])
    ])
  ]
})

注意：入場動畫中可以不指定元素的默認(rèn)狀態(tài)，Angular 會將 void 狀態(tài)清空作為默認(rèn)狀態(tài)

trigger("slide", [
  transition(":enter", [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate(250)
  ]),
  transition(":leave", [
 		animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
  ])
])

注意：要設(shè)置動畫的運(yùn)動參數(shù)，需要將 animate 方法的一個參數(shù)更改為字符串類型

// 動畫執(zhí)行總時間 延遲時間 (可選) 運(yùn)動形式 (可選)
animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))

關(guān)鍵幀動畫

關(guān)鍵幀動畫使用 keyframes 方法定義

transition(":leave", [
  animate(
    600,
    keyframes([
      style({ offset: 0.3, transform: "translateX(-80px)" }),
      style({ offset: 1, transform: "translateX(100%)" })
    ])
  )
])

動畫回調(diào)

Angular 提供了和動畫相關(guān)的兩個回調(diào)函數(shù)，分別為動畫開始執(zhí)行時和動畫執(zhí)行完成后

import { AnimationEvent } from "@angular/animations"

start(event: AnimationEvent) {
  console.log(event)
}
done(event: AnimationEvent) {
  console.log(event)
}

創(chuàng)建可重用動畫

1、將動畫的定義放置在單獨的文件中，方便多組件調(diào)用。

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]
})

2、抽取具體的動畫定義，方便多動畫調(diào)用。

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))
])

3、調(diào)用動畫時傳遞運(yùn)動總時間，延遲時間，運(yùn)動形式

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"}}))

查詢元素執(zhí)行動畫

Angular 中提供了 query 方法查找元素并為元素創(chuàng)建動畫

import { slide } from "./animations"

animations: [
  slide,
  trigger("todoAnimations", [
    transition(":enter", [
      query("h3", [
        style({ transform: "translateY(-30px)" }),
        animate(300)
      ]),
      // 查詢子級動畫 使其執(zhí)行
      query("@slide", animateChild())
    ])
  ])
]

  
Todos

  
    
  • 
      {{ item }}
    
    • 
  

    默認(rèn)情況下，父級動畫和子級動畫按照順序執(zhí)行，先執(zhí)行父級動畫，再執(zhí)行子級動畫，可以使用 group 方法讓其并行

    trigger("todoAnimations", [
  transition(":enter", [
    group([
      query("h3", [
        style({ transform: "translateY(-30px)" }),
        animate(300)
      ]),
      query("@slide", animateChild())
    ])
  ])
])

    交錯動畫

    Angular 提供了 stagger 方法，在多個元素同時執(zhí)行同一個動畫時，讓每個元素動畫的執(zhí)行依次延遲。

    transition(":enter", [
  group([
    query("h3", [
      style({ transform: "translateY(-30px)" }),
      animate(300)
    ]),
    query("@slide", stagger(200, animateChild()))
  ])
])

    注意：stagger 方法只能在 query 方法內(nèi)部使用

    自定義狀態(tài)動畫

    Angular 提供了 state 方法用于定義狀態(tài)。

    angular狀態(tài)和動畫是什么

    1、默認(rèn)代碼解析

    
  
    
      一套框架, 多種平臺, 移動端 & 桌面端
    
    
      
    
        使用簡單的聲明式模板，快速實現(xiàn)各種特性。使用自定義組件和大量現(xiàn)有組件，擴(kuò)展模板語言。在幾乎所有的
        IDE 中獲得針對 Angular
        的即時幫助和反饋。所有這一切，都是為了幫助你編寫漂亮的應(yīng)用，而不是絞盡腦汁的讓代碼“能用”。
      
    
      
    
        從原型到全球部署，Angular 都能帶給你支撐 Google
        大型應(yīng)用的那些高延展性基礎(chǔ)設(shè)施與技術(shù)。
      
    
      
    
        通過 Web Worker 和服務(wù)端渲染，達(dá)到在如今(以及未來）的 Web
        平臺上所能達(dá)到的最高速度。 Angular 讓你有效掌控可伸縮性?；?
        RxJS、Immutable.js 和其它推送模型，能適應(yīng)海量數(shù)據(jù)需求。
      
    
      
    
        學(xué)會用 Angular
        構(gòu)建應(yīng)用，然后把這些代碼和能力復(fù)用在多種多種不同平臺的應(yīng)用上 ——
        Web、移動 Web、移動應(yīng)用、原生應(yīng)用和桌面原生應(yīng)用。
      
    
    
  


    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
  }
}

    2、創(chuàng)建動畫

    trigger("expandCollapse", [
  // 使用 state 方法定義折疊狀態(tài)元素對應(yīng)的樣式
  state(
    "collapsed",
    style({
      height: 0,
      overflow: "hidden",
      paddingTop: 0,
      paddingBottom: 0
    })
  ),
  // 使用 state 方法定義展開狀態(tài)元素對應(yīng)的樣式
  state("expanded", style({ height: "*", overflow: "auto" })),
  // 定義展開動畫
  transition("collapsed => expanded", animate("400ms ease-out")),
  // 定義折疊動畫
  transition("expanded => collapsed", animate("400ms ease-in"))
])

    路由動畫

    angular狀態(tài)和動畫是什么

    1、為路由添加狀態(tài)標(biāo)識，此標(biāo)識即為路由執(zhí)行動畫時的自定義狀態(tài)

    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、通過路由插座對象獲取路由狀態(tài)標(biāo)識，并將標(biāo)識傳遞給動畫的調(diào)用者，讓動畫執(zhí)行當(dāng)前要執(zhí)行的狀態(tài)是什么

    
  

    import { RouterOutlet } from "@angular/router"

export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return (
      outlet &&
      outlet.activatedRouteData &&
      outlet.activatedRouteData.animation
    )
  }
}

    3、將 routerContainer 設(shè)置為相對定位，將它的直接一級子元素設(shè)置成絕對定位

    /* styles.css */
.routerContainer {
  position: relative;
}

.routerContainer > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

    4、創(chuàng)建動畫

    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
          })
        )
      )
    ])
  ])
])

    到此，相信大家對“angular狀態(tài)和動畫是什么”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！


    分享名稱：angular狀態(tài)和動畫是什么
    本文URL：http://weahome.cn/article/pdchdo.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220（工作日）

    18980820575（7×24）

    提交需求

    返回頂部