@angular/cli项目构建--animations
使用方法一(文件形式定义):
animations.ts
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core'; // Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
]);
在component中使用:
import { Component, HostBinding } from '@angular/core';
import { Router } from '@angular/router'; import { slideInDownAnimation } from './animations'; @Component({
templateUrl: './compose-message.component.html',
styles: [ ':host { position: relative; bottom: 10%; }' ],
animations: [ slideInDownAnimation ]
})
export class ComposeMessageComponent {
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute'; }
使用方法二(直接使用):
import {
Component,
Input
} from '@angular/core';
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations'; import { Hero } from './hero.service'; @Component({
selector: 'app-hero-list-basic',
template: `
<ul>
<li *ngFor="let hero of heroes"
[@heroState]="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
})
export class HeroListBasicComponent {
@Input() heroes: Hero[];
}
toggleState() {
this.state = this.state === 'active' ? 'inactive' : 'active';
}
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
// Component transition animationsexport const slideInDownAnimation: AnimationEntryMetadata = trigger('routeAnimation', [ state('*', style({ opacity: 1, transform: 'translateX(0)' }) ), transition(':enter', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition(':leave', [ animate('0.5s ease-out', style({ opacity: 0, transform: 'translateY(100%)' })) ]) ]);
@angular/cli项目构建--animations的更多相关文章
- @angular/cli项目构建--组件
环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...
- @angular/cli项目构建--modal
环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...
- @angular/cli项目构建--Dynamic.Form
导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...
- @angular/cli项目构建--interceptor
JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...
- @angular/cli项目构建--路由3
路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...
- @angular/cli项目构建--httpClient
app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...
- @angular/cli项目构建--路由2
app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...
- @angular/cli项目构建--路由1
app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...
- @angular/cli项目构建--Dynamic.Form(2)
form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...
随机推荐
- 4.4 使用STM32控制MC20进行GPS帧数据解析
需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...
- 指定Python线程数目
可以通过threading.semaphore()来指定并行运行的Python线程的数目. #!/usr/bin/python2.7 #File: threadsNum.py #Author: lxw ...
- 爬虫基础库之Selenium
1.简介 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作, ...
- 学习OpenCV2——Mat之通道的理解
本文详细介绍了opencv中涉及通道的知识,包括图像类型转换,通道合成分解,图像的显示. 来源:http://blog.csdn.net/GDFSG/article/details/50927257 ...
- UI控件之UICollectionView
UICollectionView:集合视图,是iOS6.0后出现的,与UITableView类似,优势在于可以灵活的布局cell UICollectionViewLayout:布局类,抽象类,一般定义 ...
- MySQL 数据库怎样把一个表的数据插入到另一个表
web开发中,我们经常需要将一个表的数据插入到另外一个表,有时还需要指定导入字段,设置只需要导入目标表中不存在的记录,虽然这些都可以在程序中拆分成简单sql来实现,但是用一个sql的话,会节 ...
- 【收藏】SearchCrawler By James Holmes
转自Crawling the Web with Java By James Holmes 无需任何扩展包,可直接运行. import java.awt.*; import java.awt.event ...
- java配置文件转义问题
场景: 配置文件config.properties 配置项cfg.regexp=\d+\t 加载配置文件代码 InputStream ins = PropManager ...
- Jsp&Servlet实现读取本地图片并展示
在Web开发中图片的读取和展示是一个很常见的功能,实现的过程大致也都一样(包括在各种框架中--)!接下来用流的方式来实现图片的展示 1. 创建Servlet,实现读取,请求方式使用get请求: p ...
- JSP--内置对象&动作标签介绍
1.JSP中常用的9大内置对象? 内置对象:在JSP页面中能直接使用的对象就是JSP内置对象,事实上,JSP底层就是一个java类,可以在JSP中直接使用的,必然存在JSP翻译后的java类 下面简单 ...