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 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
vue 实现tab切换保持数据状态
Jul 21 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
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
解密效果
2006/06/23 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
中科软测试工程师面试题
2012/06/16 面试题
高中军训感言1000字
2014/03/01 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
无房证明样本
2015/06/17 职场文书
2016公司新年问候语
2015/11/11 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis