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

点击按钮之后就

1分钟入门angular动画效果animations，敲简单滴哟~~☺相关推荐

前端实现3d效果_前端动画效果实现的简单比较
合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥.本文旨在探讨各种前端动画效果实现方式的异同,具体应用中 ...
html文字简单动画效果,CSS3一个简单的按钮悬停波浪文本动画效果
CSS 语言: CSSSCSS 确定 @import url("https://fonts.googleapis.com/css?family=Roboto:900"); body ...
anime.js 实战：实现一个带有描边动画效果的复选框...
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
css悬停动画,CSS卡片悬停动画效果实现
技术概述尝试给卡片添加鼠标悬停动画效果,主要使用CSS3的 transition(属性渐变),scale,z-index实现. 技术详述添加卡片阴影注册鼠标悬停事件,当事件触发,修改边框 box ...
用css3和canvas实现的蜂窝动画效果
近期工作时研究了一下css3动画和js动画.主要是工作中为了增强页面的趣味性,大家都有意无意的加入了非常多动画效果.当然大部分都是css3动画效果.能够gpu加速,这会降低移动端的性能需求. 今天主要 ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
基于Rebound制造绚丽的动画效果-入门篇
基于Rebound制造绚丽的动画效果-入门篇 Rebound是什么? Rebound是一个来自 Facebook 公司的 Java物理和动画库.Rebound spring 模型可用于创建动画,让你感 ...

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

1分钟入门angular动画效果animations，敲简单滴哟~~☺相关推荐

最新文章

热门文章