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
在IntelliJ IDEA中如何配置使用Maven以创建Tomcat环境
所以,别担心这些工具看起来有些吓人,实际上这些都是为了帮助你更好的完成工作的工具,就像超市里的各种烹饪工具一样,尽管它们看起来可能很复杂,但只要你学会用,它们会为你烹饪出一道道美妙的食物。这就是学习新技能的乐趣,让我们一起享受这个过程,攀登知识的高峰!
328 27
|
7月前
|
Java 应用服务中间件 API
Servlet开发流程 (里面有Idea项目添加Tomcat依赖详细教程)
本文详细介绍了Servlet的开发流程,包括在IntelliJ IDEA中添加Tomcat依赖的详细教程。通过上述步骤,开发者可以快速搭建并运行一个基本的Servlet应用,理解并掌握Servlet的开发流程对于Java Web开发至关重要。希望本文能够帮助开发者顺利进行Servlet开发,提高工作效率。
576 78
|
5月前
|
Java 应用服务中间件 Apache
在IntelliJ IDEA中使用Maven配置Tomcat环境
此配置方法具有较高的实用性,简单易懂。遵循以上步骤,您将能顺利在IntelliJ IDEA中使用Maven配置Tomcat环境,从而进行Web项目的开发和调试。
482 18
|
11月前
|
设计模式 数据可视化 Java
如何在 IDEA 中设置类路径
在 IntelliJ IDEA 中设置类路径,可以通过项目结构配置或模块设置来添加所需的库和依赖。具体步骤包括打开项目结构对话框、选择模块、添加类路径等。
1850 18
|
12月前
|
存储 缓存 Java
java基础:IO流 理论与代码示例(详解、idea设置统一utf-8编码问题)
这篇文章详细介绍了Java中的IO流,包括字符与字节的概念、编码格式、File类的使用、IO流的分类和原理,以及通过代码示例展示了各种流的应用,如节点流、处理流、缓存流、转换流、对象流和随机访问文件流。同时,还探讨了IDEA中设置项目编码格式的方法,以及如何处理序列化和反序列化问题。
298 1
java基础:IO流 理论与代码示例(详解、idea设置统一utf-8编码问题)
|
12月前
|
Linux Android开发 Windows
IDEA如何设置成Eclipse的快捷键
【10月更文挑战第9天】这段内容介绍了如何在 IntelliJ IDEA 中设置类似 Eclipse 的快捷键。主要包括:1) 打开设置;2) 进入快捷键设置页面;3) 选择 Eclipse 快捷键方案;4) 可选的自定义调整。通过这些步骤,可以让熟悉 Eclipse 的用户更快适应 IDEA。
2686 4
|
12月前
|
Java 应用服务中间件 Maven
idea+maven+tomcat+spring 创建一个jsp项目
这篇文章介绍了如何在IntelliJ IDEA中使用Maven和Tomcat创建一个JSP项目,包括配置Maven依赖、设置Tomcat服务器、编写JSP页面、创建控制器和配置文件,以及项目的运行结果。
582 0
idea+maven+tomcat+spring 创建一个jsp项目
|
前端开发 JavaScript Java
idea中如何不重启tomcat 即可看到修改内容变化
这篇文章介绍了在IntelliJ IDEA中实现对Java Web应用的热部署(Hot Swap)的多种方法,包括启用自动构建、使用Exploded Artifact、安装JRebel插件、更改静态资源、使用Spring Boot的devtools以及IDEA的HotSwap功能,以便在不重启Tomcat服务器的情况下看到修改内容的变化。
idea中如何不重启tomcat 即可看到修改内容变化
|
XML 数据格式
IDEA 行注释设置,使其不从顶格开始,让其处于代码前开始
这篇文章提供了IntelliJ IDEA中如何设置行注释不从顶格开始,而是紧接在代码前面的方法,通过访问Settings中的Code Style选项进行调整,以改善代码注释的视觉效果。