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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
vue权限问题的完美解决方案
May 08 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vant中的toast层级改变操作
Nov 04 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获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
js select常用操作控制代码
2010/03/16 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
Move.js入门
2017/02/08 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python中unittest用法实例
2014/09/25 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
对pandas处理json数据的方法详解
2019/02/08 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
学生打架检讨书大全
2014/01/23 职场文书
培训自我鉴定
2014/01/31 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
python实现的web监控系统
2021/04/27 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers