- 安装动画模块
npm i —save @angular/animations
- 在 app.module.ts中引入动画模块BrowserAnimationsModule
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [
BrowserModule,
BrowserAnimationsModule // 这个一般放在最后, 不然有可能会出异常
],
- angular过渡动画初体验
import {trigger, state, transition, style, animate, keyframes} from '@angular/animations';
export const cardAnim = trigger('card', [
state('out', style({transform: 'scale(1)', 'box-shadow': 'none', 'background': 'deepskyblue'})),
state('hover', style({transform: 'scale(1.1)', 'box-shadow': '3px 3px 5px #ccc', 'background': '#FF34B3'})),
transition('out => hover', animate('100ms ease-in')),
transition('hover => out', animate('100ms ease-out'))
]);
import {Component, OnInit, HostBinding, HostListener} from '@angular/core';
import {cardAnim} from '../anims/card.anim';
@Component({
selector: 'app-project-item',
templateUrl: './project-item.component.html',
styleUrls: ['./project-item.component.css'],
animations: [cardAnim]
})
export class ProjectItemComponent implements OnInit {
// 在 Angular 中，我们可以使用 HostBinding 装饰器，实现元素的属性绑定。
// 等于说是,在外边调用该组件时, 给这个组件绑定了 [@card] = 'cardState' 属性
// 将 cardState 绑定到 @card 属性上去
// @HostBinding('@card') cardState = 'out';
cardState = 'out';
constructor() {
}
ngOnInit() {
// 数组里面删除某个元素
// this.projects = this.projects.filter(p => p.id !== project.id);
}
// HostListener 是属性装饰器，用来为宿主元素添加事件监听。
@HostListener('mouseenter', ['$event.target'])
onMouseEnter(target) {
this.cardState = 'hover';
}
@HostListener('mouseleave')
onMouseLeave() {
this.cardState = 'out';
}
}
<div class="wrapper" [@card]="cardState">
</div>
- 路由动画
/**
* 动画组
* @type {AnimationTriggerMetadata}
*/
export const slideToRight = trigger('routeAnim', [
state('void', style({'position': 'fixed', 'width': '100%', 'height': '80%'})),
state('*', style({'position': 'fixed', 'width': '100%', 'height': '80%'})),
transition(':enter', [
style({transform: 'translateX(-100%)', opacity: 0}),
group([
animate('.5s ease-in-out', style({transform: 'translateX(0)'})),
animate('.3s ease-in', style({opacity: 1}))
])
]),
transition(':leave', [
style({transform: 'translateX(0)', opacity: 1}),
group([
animate('.5s ease-in-out', style({transform: 'translateX(100%)'})),
animate('.3s ease-in', style({opacity: 0}))
])])
]);
- 路由动画的使用，在需要使用路由动画的页面进行全局绑定如下：
// 定义路由动画
@HostBinding('@routerAnimate') state;
import {trigger, state, transition, style, animate, keyframes} from '@angular/animations';
/**定义动画的ts文件**/
export const cardAnim = trigger('card', [
state('out', style({transform: 'scale(1)', 'box-shadow': 'none', 'background': 'deepskyblue'})),
state('hover', style({transform: 'scale(1.1)', 'box-shadow': '3px 3px 5px #ccc', 'background': '#FF34B3'})),
transition('out => hover', animate('100ms ease-in')),
transition('hover => out', animate('100ms ease-out'))
]);
// 定义一个鼠标点击运动的动画box样式的元素会向左向右移动。
export const boxAnimate = trigger('box', [
// 定义一个状态left
state('left', style({ transform: 'translate3d(0,0,0)' })),
// 定义另外一个状态right
state('right', style({ transform: 'translate3d(200%,0,0)' })),
// 定义运动过程(从left到right状态)
transition('left=>right', animate('2s cubic-bezier(1,.65,0,-1.06)', keyframes([
style({ transform: 'translate3d(300%,0,0)' })
]))),
// 定义运动过程(从right到left)
transition('right=>left', animate(1000, keyframes([
style({ transform: 'translate3d(-100%,0,0)' }),
]))),
]);
export const slideToRight = trigger('routerAnimate', [
// 定义void表示空状态下
state('void', style({ position: 'fixed', 'width': '100%', 'height': '100%' })),
// * 表示任何状态
state('*', style({ position: 'fixed', 'width': '100%', 'height': '100%' })),
// 进场动画
transition(':enter', [
style({ transform: 'translate3d(-100%,0,0)' }),
animate('.5s ease-in-out', style({ transform: 'translate3d(0,0,0)' }))
]),
// 出场动画
transition(':leave', [
style({ transform: 'translate3d(0,0,0)' }),
animate('.5s ease-in-out', style({ transform: 'translate3d(100%,0,0)' }))
])
]);
export const square = trigger('square', [
state('green', style({'background-color': 'green', height: '100px', transform: 'translateY(-100%)'})),
state('red', style({'background-color': 'red', height: '100px', transform: 'translateY(100%)'})),
transition('green => red', animate('.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)')),
transition('red => green', animate(5000, keyframes([
style({transform: 'translateY(100%)'}),
style({transform: 'translateY(98%)'}),
style({transform: 'translateY(95%)'}),
style({transform: 'translateY(90%)'}),
style({transform: 'translateY(80%)'}),
style({transform: 'translateY(60%)'}),
style({transform: 'translateY(30%)'}),
style({transform: 'translateY(0)'}),
style({transform: 'translateY(-10%)'}),
style({transform: 'translateY(-5%)'}),
style({transform: 'translateY(-2%)'}),
style({transform: 'translateY(0)'}),
style({transform: 'translateY(10%)'}),
style({transform: 'translateY(15%)'}),
style({transform: 'translateY(-15%)'}),
style({transform: 'translateY(-40%)'}),
style({transform: 'translateY(-80%)'}),
style({transform: 'translateY(-90%)'}),
style({transform: 'translateY(-95%)'}),
style({transform: 'translateY(100%)'}),
])))
])
使用方式
<div class="box1" [@card]="cardAnimState" (mouseleave)="onMouseLeave()" (mouseenter)="onMouseEnter()"></div>
import { Component, OnInit, HostListener, HostBinding } from '@angular/core';
import {boxAnimate, cardAnim, slideToRight} from '../../animate/exec1'
@Component({
selector: 'app-exec1',
templateUrl: './exec1.component.html',
styleUrls: ['./exec1.component.css'],
animations: [
boxAnimate,
cardAnim,
slideToRight
]
})
export class Exec1Component implements OnInit {
private boxState: String = 'left'
private isTrue: Boolean = true
private cardAnimState: string = 'out'
constructor() { }
ngOnInit() {
}
// 通过hostbinding绑定的就是路由动画
// 可以使用HostListener 对组件进行事件监听 来执行组件的动画同样可以使用事件的绑定来改变状态的值来进行动画的切换
@HostBinding('@routerAnimate')
start(){
if(this.isTrue){
this.boxState = 'right'
} else {
this.boxState = 'left'
}
this.isTrue = !this.isTrue
}
onMouseEnter(){
this.cardAnimState = 'hover'
}
onMouseLeave(){
this.cardAnimState = 'out'
}
}
// 可以使用这样的方式来改变值
// this.square = this.square === 'green' ? 'red': 'green'
自定义缓动函数: http://cubic-bezier.com/
