脚本宝典收集整理的这篇文章主要介绍了

Angular练习之animations动画

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

返回目录

前言

文章基于angular的练手项目。文章目录

本文实现效果

Angular 动画

让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器(animation triggers)来定义一系列状态和变换属性。我们也可以用CSS样式来改写实现我们想要的效果
主要的原则是开始和结尾的动画样式由我们自定义,中间变换的计算过程交给工具本身
当然,可以通过设置时间来设置中间动画,比如1s,1.2s,200ms。其他的就是大家熟悉的CSS动画的速度属性比如ease、liner和ease-in-out。
而Angular 4.2以上的版本里我们可以用顺序(sequence)和组合(group)来让动画一个接一个执行还是同时执行;查询(query)可以操作子元素而交错(stagger)可以创造一个很棒的连锁效果。
这些事件将触发一个动画:
向或者从视图里装载或者卸载一个元素
改变已绑定触发器的状态 比如:[@routerTransition]="home"
在路由转换的前后关系中,要注意,组件正在被移除并作为导航的一部分被添加到视图中的过程。

练习开始

创建了新模块或组件包含视图,需要注入到主模块和添加路由。这里就不介绍了,主要练习动画。

引入动画模块

在主模块AppModule.ts文件中引入运动的模块BrowserAnimationsModule,

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  imports: [
    BrowserModule,
    RouterModule,
    BrowserAnimationsModule
  ],

创建自己动画模块

练习使用angular的动画模块,我们单独创建一个模块练习。

ng g module my-animations

创建例子1组件

ng g component my-animations/exp1

定义动画样式

在my-animations模块中添加animations.ts文件,并写入动画样式。这个文件里定义的动画便是核心内容。需要有一定的css动画基础才能写出漂亮的动画效果。

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

// 定义一个鼠标点击运动的动画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(2000, keyframes([
    style({ transform: 'translate3d(300%,0,0)' })
  ]))),
  // 定义运动过程(从right到left)
  transition('right=>left', animate(1000, keyframes([
    style({ transform: 'translate3d(-100%,0,0)' }),
  ]))),
]);

创建动画载体

在exp1.component.html文件中添加元素