使用方法一(文件形式定义):

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的更多相关文章

  1. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  2. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  3. @angular/cli项目构建--Dynamic.Form

    导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...

  4. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  5. @angular/cli项目构建--路由3

    路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...

  6. @angular/cli项目构建--httpClient

    app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...

  7. @angular/cli项目构建--路由2

    app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...

  8. @angular/cli项目构建--路由1

    app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...

  9. @angular/cli项目构建--Dynamic.Form(2)

    form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...

随机推荐

  1. paramiko 模块安装和使用

    一.Centos安装Paramiko 1.安装组件 yum install openssl openssl-devel python-dev pycrypto -y yum install zlib- ...

  2. excel中如何取消自动超链接?

    最近做的表格有点多,年终述职也到了.总有一些地方生疏了,幸好还有点小印象.记录下来,以后可以回来看看. 方法一 适合单个链接的取消 1 输入网址后,按回车键确认,快捷键ctrl+z,即可取消,这种不好 ...

  3. Docker容器技术-自动化部署

    一.用Chef自动化部署Docker 1.为什么需要自动化部署? Docker引擎需要配置很多参数(cgroups.内存.CPU.文件系统等) 识别Docker容器运行在哪个宿主机上 耗时且容易出错, ...

  4. Shell编程之Expect自动化交互程序

    一.Expect自动化交互程序 1.spawn命令 通过spawn执行一个命令或程序,之后所有的Expect操作都会在这个执行过的命令或程序进程中进行,包括自动交互功能. 语法: spawn [ 选项 ...

  5. Linux VPS实用简单安全配置

    今天,和大家一起来分享VPS最基本的安全配置. 第一.修改SSH端口 VPS默认的SSH端口是22,那些扫描穷举密码的,也势必从22开始,所以,修改22为一个其他的数字,是非常有必要的. 好了,SSH ...

  6. Windows系统 PHPstudy Apache无法启动的解决办法

    最近在配置phpstudy的时候,出现是phpstudy apache无法启动的情况,其实也不是一点也不能启动,而且apache的启动状态亮一下就自动关闭了. 这样情况大部分小伙伴应该都遇到过,以前看 ...

  7. nginx常见面试题1

    Nginx是网页服务器运维人员不可能绕开的一个弯,剩下几个比较高危的面试范围是:linux基础.网络知识基础.python,或许还会有zabbix等监控工具.这里先说nginx,后面几个肯定也会写. ...

  8. Response对象介绍(服务器到客户端)

    1.response的状态码和响应头设置 package com.test; import java.io.IOException; import java.io.PrintWriter; impor ...

  9. 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 ...

  10. Web 应用程序项目与 Visual Studio 中的网站项目的异同

    要查看英语原文,请勾选“英语”复选框.也可将鼠标指针移到文本上,在弹出窗口中显示英语原文. 翻译 英语 本文档已存档,并且将不进行维护. Web 应用程序项目与 Visual Studio 中的网站项 ...