Angular动画实现的2种方式以及添加购物车动画实例代码


Posted in Javascript onAugust 09, 2018

前言

在前端应用中,动画是一个常见的场景。在使用了一系列的动画库之后,终于需要自己来实现一个动画了。这次的动画则是基于 Angular 框架。我的场景是一个类似于添加购物车的动画。在这个场景里,需要两个动画,一个是购物车数量的增加动画,一个则是折叠页面元素的动画。

在实现的过程上,我采用了两种不同的 Angular 动画的方式:

  • 使用 TypeScript 控制动画
  • 使用 @Component 中的 animations

Angular 动画基础

如 Angular 官网中的示例那样,要在 Angular 应用中添加动画是比较简单的一件事——前提是我们懂得添加的法则。如下是官网的示例:

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

要使用动画,需要在模板中使用 [@heroState]语法,这里的 heroState 对应着 @Component 中的 heroState 相关的动画。

  • 在这个 trigger 中,我们定义了 inactive 和 active 两个不同的 state。即当模板中的 hero.state 发生变化的时候,我们就会找到对应的 state 的样式等等的内容。
  • 在这个 trigger 中,我们还定义了两个 transition,即当我们的 state 从 inactive => active 或者 active => inactive 时,我们就会执行后面的动画。

原理上,大概就是这么多了。然后,我就开始了我的动画之旅。

购物车数量增加动画

对于我的场景来说,要添加这个动画并不难。无非就是上一个值淡出,新的值淡入:

trigger('count', [
 transition('void => current', [
 animate(
 '400ms 150ms',
 keyframes([
  style({ opacity: 0.6, transform: 'translateY(0)', offset: 0 }),
  style({ opacity: 0.3, transform: 'translateY(-15px)', offset: 0.5 }),
  style({ opacity: 0, transform: 'translateY(-30px)', offset: 1 })
 ])
 )
 ]),
 transition('void => last', [
 animate(
 250,
 keyframes([
  style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),
  style({ opacity: 0.3, transform: 'translateY(15px)', offset: 0.5 }),
  style({ opacity: 0.8, transform: 'translateY(0)', offset: 1.0 })
 ])
 )
 ])
 ])

代码就是这么简单,这里用到了关键帧 keyframes,来进行一些简单的动画转换。

页面缩放动画

随后,我需要做的就是对页面的元素进行缩放等效果,这个时候就需要用到 AnimationBuilder 来实现了:

const myAnimation = this.animationBuilder.build([
 animate(
 1000,
 keyframes([
  style({ opacity: 0.8, transform: 'scale(0.8)', offset: 0.3 }),
  style({ opacity: 0.3, transform: 'scale(0.3)', offset: 0.5 }),
  style({ opacity: 0.2, transform: 'scale(0.2) translate(12000px, 8000px)', offset: 1 })
 ])
 )
 ]);

 const player = myAnimation.create(forkFormComponent);
 player.play();
 player.onDone(() => {
 const nativeElement = this.cartContainer.nativeElement;
 nativeElement.removeChild(nativeElement.childNodes[0]);
 this.renderer.setStyle(nativeElement, 'display', 'none');
 });

在那之前,我先复制了页面元素:

const formElement = this.formElement.nativeElement;

const forkFormComponent = this.cartContainer.nativeElement;
forkFormComponent.appendChild(formElement.cloneNode(true));

this.renderer.setStyle(forkFormComponent, 'display', 'block');
this.renderer.setStyle(forkFormComponent, 'position', 'absolute');
this.renderer.setStyle(forkFormComponent, 'top', '-300px');
this.renderer.setStyle(forkFormComponent, 'left', '0');

这样一来,就能复制页面的 DOM,然后实现缩放效果了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
学习面向对象之面向对象的术语
Nov 30 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 #Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 #Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
React中如何引入Angular组件详解
Aug 09 #Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 #jQuery
You might like
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php表单处理操作
2017/11/16 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python列表元素常见操作简单示例
2019/10/25 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
什么是规则表达式
2012/05/03 面试题
购房个人委托书范本
2014/10/11 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
文明礼仪主题班会
2015/08/13 职场文书