1分钟入门angular动画效果animations，敲简单滴哟~~-阿里云开发者社区

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

2023-12-14 55

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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,//同步加载
  },