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

点击按钮之后就


相关文章
|
3月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
59 0
|
3月前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
48 0
|
3月前
|
前端开发 UED
Angular 动画教程超赞!掌握让应用更具交互性的技巧,开启精彩的前端动画之旅!
【8月更文挑战第31天】在现代前端开发中,提升用户体验至关重要,而动画是增强应用交互性的有效手段。Angular 提供了强大的动画功能,可轻松添加各种动画效果。本文介绍了 Angular 动画的基本概念、使用动画模块、事件触发动画、动画序列与并行执行、性能优化及结合第三方动画库等最佳实践。通过遵循这些实践,可以充分发挥 Angular 动画的优势,提升用户体验。下面是一个简单的示例应用,展示了如何使用 Angular 动画实现元素的显示和隐藏效果。
46 0
|
6月前
1分钟入门angular动画效果animations,敲简单滴哟~~
1分钟入门angular动画效果animations,敲简单滴哟~~
1分钟入门angular动画效果animations,敲简单滴哟~~
|
前端开发 JavaScript
Angular框架入门指南
Angular框架入门指南
223 0
|
监控 JavaScript
angular之入门基础
angular之入门基础
144 0
angular之入门基础
|
前端开发 JavaScript
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
457 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
|
JavaScript
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
386 0
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
|
API
Angular 2.x折腾记 :(10) 初步了解动画,以及一步一步写个动画效果
过渡动画这东西,在现代开发中是必不可少的,死板和酷炫与之息息相关;
125 0
初露锋芒 Angular6 入门项目 - 4 下
初露锋芒 Angular6 入门项目 - 4 下
121 0