?運行代碼創(chuàng)建component

ng g c animate-test

?然后在app.module.ts做如下引入

?分別是下面兩行，自行引入

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';//注意這個很重要BrowserAnimationsModule,//注意這個很關鍵,沒有引入動不起來

接下來傻瓜式拷貝代碼?

?animate-test.component.html

<button (click)="toggle()">{{yellowOrGreen ? '你黃了！':'你被綠了！'}}</button>
<div [@openClose]="yellowOrGreen ? 'yellow' : 'green'" ><p>{{yellowOrGreen ? '你黃了！':'你被綠了！'}}</p>
</div>

animate-test.component.ts

import {Component, OnInit} from '@angular/core';
import {trigger, state, style, animate, transition} from '@angular/animations';@Component({selector: 'app-animate-test',templateUrl: './animate-test.component.html',styleUrls: ['./animate-test.component.css'],animations: [trigger('openClose', [state('yellow', style({height: '50px', color: 'black', backgroundColor: 'yellow'})),state('green', style({height: '100px', color: 'white', fontSize: '40px', fontWeight: 'bold', backgroundColor: 'green'})),transition('yellow=>green', [animate('0.3s')]),transition('green=>yellow', [animate('0.5s')]),// transition('yellow <=> green', [animate('1s')]) //雙箭頭可以指定兩個狀態(tài)互相轉(zhuǎn)場])]
})
export class AnimateTestComponent implements OnInit {public yellowOrGreen = true;ngOnInit() {}public toggle() {this.yellowOrGreen = !this.yellowOrGreen;}
}

然后別忘了在app-routing.module.ts路由里面加入這個組件頁面喲~

import {AnimateTestComponent} from "./components/animate-test/animate-test.component";{path: 'animate-test',component: AnimateTestComponent,//同步加載},

然后ng?start --open跑起來吧親~

注意訪問地址大概是http://localhost:4200/animate-test

點擊按鈕之后就

總結

以上是生活随笔為你收集整理的1分钟入门angular动画效果animations，敲简单滴哟~~☺的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。