1分钟入门angular动画效果animations,敲简单滴哟~~☺

简介: 1分钟入门angular动画效果animations,敲简单滴哟~~☺

运行代码创建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')]) //双箭头可以指定两个状态互相转场
    ])
  ]
})
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

点击按钮之后就


相关文章
|
9天前
1分钟入门angular动画效果animations,敲简单滴哟~~
1分钟入门angular动画效果animations,敲简单滴哟~~
1分钟入门angular动画效果animations,敲简单滴哟~~
|
9月前
|
前端开发 JavaScript
Angular框架入门指南
Angular框架入门指南
161 0
|
监控 JavaScript
angular之入门基础
angular之入门基础
115 0
angular之入门基础
|
前端开发 JavaScript
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
408 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
|
JavaScript
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
328 0
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
|
API
Angular 2.x折腾记 :(10) 初步了解动画,以及一步一步写个动画效果
过渡动画这东西,在现代开发中是必不可少的,死板和酷炫与之息息相关;
110 0
初露锋芒 Angular6 入门项目 - 4 下
初露锋芒 Angular6 入门项目 - 4 下
90 0
|
缓存 API 数据库
初露锋芒 Angular6 入门项目 - 4 上
初露锋芒 Angular6 入门项目 - 4 上
130 0
|
JavaScript 前端开发 测试技术
初露锋芒 Angular6 入门项目 - 3
初露锋芒 Angular6 入门项目 - 3
115 0
|
9天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
14 0