Angular练习之animations动画
返回目录 前言
Angular 动画让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器(animation triggers)来定义一系列状态和变换属性。我们也可以用CSS样式来改写实现我们想要的效果 练习开始创建了新模块或组件包含视图,需要注入到主模块和添加路由。这里就不介绍了,主要练习动画。 引入动画模块在主模块AppModule.ts文件中引入运动的模块BrowserAnimationsModule, import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; imports: [ BrowserModule,RouterModule,BrowserAnimationsModule ], 创建自己动画模块
ng g module my-animations
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)' })),// 定义另外一个状态right state('right',style({ transform: 'translate3d(200%,// 定义运动过程(从left到right状态) transition('left=>right',animate(2000,keyframes([ style({ transform: 'translate3d(300%,0)' }) ]))),// 定义运动过程(从right到left) transition('right=>left',animate(1000,keyframes([ style({ transform: 'translate3d(-100%,0)' }),]))),]); 创建动画载体在exp1.component.html文件中添加元素 <h1>动画实例1</h1> <div style="height: 100px;width: 100px;background-color: black" (click)="start()" [@box]="boxState"></div> 修改exp1.component.ts文件如下 import { Component,OnInit } from '@angular/core'; import {boxAnimate} from "../animations" @Component({ selector: 'app-exp1',templateUrl: './exp1.component.html',animations: [ boxAnimate ] }) export class Exp1Component 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; } }
总结
源码https://github.com/yiershan/A... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- AngularJS – 如何在我的javascript解析之前存在ng-repeat中
- 在Vim中按括号列索引缩进代码?
- angularjs – 发送变量到控制器(‘resolve’)在ngDialog
- AngularJS1.x学习(directive 中‘& ’‘=’ ‘@’符号
- Scala中List(),Array()和新List(),新Array()之间的差异
- bootstrap-自定义列表组
- angularjs – Angular Animate 1.4太快了
- 当匹配发现时,shell – sed替换整行
- Unix架构的演变图
- angularjs – Angular UI Bootstrap模式:[$inject:unpr]未