@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( ...
随机推荐
- paramiko 模块安装和使用
一.Centos安装Paramiko 1.安装组件 yum install openssl openssl-devel python-dev pycrypto -y yum install zlib- ...
- excel中如何取消自动超链接?
最近做的表格有点多,年终述职也到了.总有一些地方生疏了,幸好还有点小印象.记录下来,以后可以回来看看. 方法一 适合单个链接的取消 1 输入网址后,按回车键确认,快捷键ctrl+z,即可取消,这种不好 ...
- Docker容器技术-自动化部署
一.用Chef自动化部署Docker 1.为什么需要自动化部署? Docker引擎需要配置很多参数(cgroups.内存.CPU.文件系统等) 识别Docker容器运行在哪个宿主机上 耗时且容易出错, ...
- Shell编程之Expect自动化交互程序
一.Expect自动化交互程序 1.spawn命令 通过spawn执行一个命令或程序,之后所有的Expect操作都会在这个执行过的命令或程序进程中进行,包括自动交互功能. 语法: spawn [ 选项 ...
- Linux VPS实用简单安全配置
今天,和大家一起来分享VPS最基本的安全配置. 第一.修改SSH端口 VPS默认的SSH端口是22,那些扫描穷举密码的,也势必从22开始,所以,修改22为一个其他的数字,是非常有必要的. 好了,SSH ...
- Windows系统 PHPstudy Apache无法启动的解决办法
最近在配置phpstudy的时候,出现是phpstudy apache无法启动的情况,其实也不是一点也不能启动,而且apache的启动状态亮一下就自动关闭了. 这样情况大部分小伙伴应该都遇到过,以前看 ...
- nginx常见面试题1
Nginx是网页服务器运维人员不可能绕开的一个弯,剩下几个比较高危的面试范围是:linux基础.网络知识基础.python,或许还会有zabbix等监控工具.这里先说nginx,后面几个肯定也会写. ...
- Response对象介绍(服务器到客户端)
1.response的状态码和响应头设置 package com.test; import java.io.IOException; import java.io.PrintWriter; impor ...
- SolrCloud 5.5.5 + Zookeeper + HDFS使用
安装sol r 三个节点192.168.1.231,192.168.1.234,192.168.1.235 下载安装包solr.tar.gz 解压 tar -zxvf solr.tar.gz 配置ZK ...
- Web 应用程序项目与 Visual Studio 中的网站项目的异同
要查看英语原文,请勾选“英语”复选框.也可将鼠标指针移到文本上,在弹出窗口中显示英语原文. 翻译 英语 本文档已存档,并且将不进行维护. Web 应用程序项目与 Visual Studio 中的网站项 ...