angular4中动画及路由动画的使用

原创

水痕01 2021-06-15 16:00:55 ©著作权

文章标签 angular教程 angular 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者水痕01的原创作品，请联系作者获取转载授权，否则将追究法律责任

angular4中动画已经拆分出去的,在项目中需要使用动画需要手动安装

一、基本配置

1、安装动画库
```
npm install @angular/animations --save
```
2、创建一个基本的项目,配置路由

二、动画的基本步骤

1、创建一个文件夹专门存放项目中的动画

2、创建一个动画文件,引入包(根据需要引入)

import { trigger, state, style, transition, animate } from '@angular/animations';

3、在AppModule.ts中引入运动的模块BrowserAnimationsModule

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

3、通过鼠标点击修改状态实现动画(参考page1下面的正方形)

**定义动画的ts文件**
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

// 定义一个鼠标点击运动的动画

export const boxAnimate = trigger('box', [
    // 定义一个状态left
    state('left', style({ 'background-color': '#360', transform: 'translate3d(0,0,0)' })),
    // 定义另外一个状态right
    state('right', style({ 'background-color': '#630', transform: 'translate3d(500px,0,0)' })),
    // 定义运动过程(从left到right状态)
    transition('left=>right', animate(5000, keyframes([
        style({ transform: 'translate3d(10%,0,0)' }),
        style({ transform: 'translate3d(20%,0,0)' }),
        style({ transform: 'translate3d(40%,0,0)' }),
        style({ transform: 'translate3d(50%,0,0)' }),
        style({ transform: 'translate3d(60%,0,0)' }),
        style({ transform: 'translate3d(70%,0,0)' }),
        style({ transform: 'translate3d(80%,0,0)' }),
        style({ transform: 'translate3d(90%,0,0)' }),
        style({ transform: 'translate3d(100%,0,0)' }),
    ]))),
    // 定义运动过程(从right到left)
    transition('right=>left', animate(5000, keyframes([
        style({ transform: 'translate3d(100%,0,0)' }),
        style({ transform: 'translate3d(80%,0,0)' }),
        style({ transform: 'translate3d(70%,0,0)' }),
        style({ transform: 'translate3d(40%,0,0)' }),
        style({ transform: 'translate3d(30%,0,0)' }),
        style({ transform: 'translate3d(0%,0,0)' })
    ]))),
]);

**页面上使用**
<div class="box" (click)="start()" [@box]="boxState"></div>
**页面的ts文件**
import { Component, OnInit } from '@angular/core';
import { boxAnimate } from '../../animates/base-click';

@Component({
    selector: 'app-page1',
    templateUrl: './page1.component.html',
    styleUrls: ['./page1.component.scss'],
    animations: [
        boxAnimate
    ]
})
export class Page1Component implements OnInit {
    // 定义开始的状态
    private boxState: String = 'left';
    private _isTrue: Boolean = true;
    constructor() { }

    ngOnInit() {
    }
    start(): void {
        console.log('开始运动');
        if (this._isTrue) {
            this.boxState = 'right';
        } else {
            this.boxState = 'left';
        }
        this._isTrue = !this._isTrue;
    }
}

4、通过鼠标移上去改变状态(参考page2)

// 绑定一个鼠标移入改变状态
@HostListener('mouseenter', ['$event'])
onMouseEnter(event) {
    console.log(event);
    this.boxHoverState = 'in';
}
// 绑定一个鼠标移出改变状态
@HostListener('mouseleave')
onmouseleave() {
    this.boxHoverState = 'out';
}

5、效果

补充说明

* 1、需要获取鼠标当前位置的信息可以根据上面4来做
* 2、如果是给整个组件绑定

// 给组件整体绑定一个属性,开始的状态是out
@HostBinding('@card') cardState = 'out';

三、路由动画

1、单独定义一个动画文件

import { trigger, state, style, transition, animate } from '@angular/animations';


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)' }))
    ])
]);