成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

angular4動畫的使用

chadLi / 3098人閱讀

摘要：引入動畫模塊的動畫模塊是獨(dú)立出去，所以要通過來下拉動畫模塊在中導(dǎo)入動畫模塊并注冊注冊下面就開始寫一個簡單的動畫這里是封裝好動畫引入，在里面新建一個文件引入動畫需要的模塊編寫默認(rèn)，出場，離場的動畫下面是實現(xiàn)代碼之后和平時使用動畫差不多

引入動畫模塊

angular4的動畫模塊是獨(dú)立出去，所以要通過npm來下拉動畫模塊

npm install -S  @angular/animations; [-S : save ]

在app.module.ts中導(dǎo)入動畫模塊并注冊

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

// 注冊
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    routing
  ]

下面就開始寫一個簡單的動畫

1：這里是封裝好動畫引入，在animations里面新建一個fly-in.ts文件

2：引入動畫需要的模塊

3：編寫默認(rèn)，出場，離場的動畫

下面是實現(xiàn)代碼

// 之后和平時使用動畫差不多，在需要的地方引入相關(guān)的指令，接口什么的
import {
  trigger,  // 動畫封裝觸發(fā)，外部的觸發(fā)器
  state, // 轉(zhuǎn)場狀態(tài)控制
  style, // 用來書寫基本的樣式
  transition, // 用來實現(xiàn)css3的 transition
  animate, // 用來實現(xiàn)css3的animations
  keyframes // 用來實現(xiàn)css3 keyframes的
} from "@angular/animations";
export const flyIn = trigger("flyIn", [
  state("in", style({transform: "translate(0)"})), // 默認(rèn)平移0

  transition("void => *", [ // 進(jìn)場動畫
    animate(300, keyframes([
      style({opacity: 0, transform: "translateX(-100%)", offset: 0}),
      style({opacity: 1, transform: "translateX(25px)",  offset: 0.3}),
      style({opacity: 1, transform: "translateX(0)",     offset: 1.0})
    ]))
  ]),
  transition("* => void", [ // 離場動畫
    animate(300, keyframes([
      style({opacity: 1, transform: "translateX(0)",     offset: 0}),
      style({opacity: 1, transform: "translateX(-25px)", offset: 0.7}),
      style({opacity: 0, transform: "translateX(100%)",  offset: 1.0})
    ]))
  ])

]);
在要使用的組件的component.ts的實現(xiàn)

在component這個裝飾器里面注入要依賴的動畫模塊

import {flyIn} from "../animations/fly-in";

@Component({
  selector: "app-tongji",
  templateUrl: "./#component.html",
  styleUrls: ["./#component.less"],
  animations: [
    flyIn
  ]
})
html中的實現(xiàn) 

  

    動畫

??這樣就可以輕松實現(xiàn)一個動畫了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92216.html

相關(guān)文章

  • Angular2 VS Angular4 深度對比：特性、性能

    摘要：的特性和性能是的超集，用于幫助的開發(fā)。注解提供了連接元數(shù)據(jù)和功能的工具。通過在庫中提供基本信息可以調(diào)用函數(shù)或創(chuàng)建類的實例來檢查相關(guān)元數(shù)據(jù)，從而簡化了對象實例的構(gòu)建。停用它會響應(yīng)跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應(yīng)用開發(fā)領(lǐng)域，Angular被認(rèn)為是最好的開源JavaScri...

    孫淑建 評論0 收藏0

  • 使用Angular4動畫為頁面添彩

    摘要：使用組件將根據(jù)視口放置，并滑過頁面。這意味著我們不能使用狀態(tài)來對路由組件進(jìn)行樣式，因為這樣可以將樣式應(yīng)用于父結(jié)點(diǎn)我們的示例中的主元素，而不是路由組件。 原文：Angular?—?Supercharge your Router transitions using new animation features (v4.3+) 首先我們看一下效果展示的demo Basic Variation...

    jay_tian 評論0 收藏0

  • Angular4 實戰(zhàn)開發(fā)

    摘要：實戰(zhàn)系列目前處于章節(jié)不定，內(nèi)容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結(jié)合通俗易懂的實例來讓大家理解常用的知識點(diǎn)。原文鏈接實戰(zhàn)開發(fā) 《Angular 實戰(zhàn)系列》目前處于章節(jié)不定，內(nèi)容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結(jié)合通俗易懂的實例來讓大家理解常用的知識點(diǎn)。 章節(jié) Angular CLI 創(chuàng)建組件(Component) 使用CSS美化組...

    Hegel_Gu 評論0 收藏0

  • Angular4 實戰(zhàn)開發(fā)

    摘要：實戰(zhàn)系列目前處于章節(jié)不定，內(nèi)容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結(jié)合通俗易懂的實例來讓大家理解常用的知識點(diǎn)。原文鏈接實戰(zhàn)開發(fā) 《Angular 實戰(zhàn)系列》目前處于章節(jié)不定，內(nèi)容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結(jié)合通俗易懂的實例來讓大家理解常用的知識點(diǎn)。 章節(jié) Angular CLI 創(chuàng)建組件(Component) 使用CSS美化組...

    vboy1010 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<