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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
Javascript中的常见排序算法
2007/03/27 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python bytes string相互转换过程解析
2020/03/05 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
总监职责范文
2013/11/09 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
通讯稿格式及范文
2015/07/22 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android