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 组件之旅(一)分析和设计
Oct 28 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
vue 实现input表单元素的disabled示例
Oct 28 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
PHP5+UTF8多文件上传类
2008/10/17 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JS原型链怎么理解
2016/06/27 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
python3简单实现微信爬虫
2015/04/09 Python
python中私有函数调用方法解密
2016/04/29 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
小学二年级评语
2014/04/21 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
新学期主题班会
2015/08/17 职场文书