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

点击按钮之后就


相关文章
|
5天前
|
Java 应用服务中间件 Maven
Spring Boot项目打war包(idea:多种方式)
Spring Boot项目打war包(idea:多种方式)
19 1
|
5天前
|
Java Maven
Maven配置以及IDEA设置(Cannot resolve plugin org.apache.maven.plugins:报错)
Maven配置以及IDEA设置(Cannot resolve plugin org.apache.maven.plugins:报错)
24 1
|
1天前
|
Oracle Java 关系型数据库
实时计算 Flink版操作报错合集之本地打成jar包,运行报错,idea运行不报错,是什么导致的
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
10 0
|
1天前
|
Oracle Java 关系型数据库
实时计算 Flink版操作报错合集之本地打成jar包,运行报错,idea运行不报错,是什么导致的
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
21 6
|
5天前
|
Java Spring
idea2020.1打不开和运行nbcio-boot错误解决方案
idea2020.1打不开和运行nbcio-boot错误解决方案
15 1
|
5天前
Mac上IntelliJ IDEA设置类注释和方法注释带作者和日期
Mac上IntelliJ IDEA设置类注释和方法注释带作者和日期
|
5天前
idea创建Package时出现包名累加,而不是树形结构解决方法
idea创建Package时出现包名累加,而不是树形结构解决方法
IDEA不常见的设置
记录IntelliJ IDEA下一些不容易解决的设置问题,长期更新。 Mac下 快捷键 由于Mac的Ctrl + 左键 = 右键功能,在IDEA中 Ctrl+左键 将跳入某个方法,并打开右键菜单。
1142 0
|
5天前
|
安全 Java 数据库连接
在IntelliJ IDEA中通过Spring Boot集成达梦数据库:从入门到精通
在IntelliJ IDEA中通过Spring Boot集成达梦数据库:从入门到精通
|
5天前
|
存储 IDE Java
IntelliJ IDEA 安装及配置详细教程
IntelliJ IDEA 安装及配置详细教程
28 0