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 相关文章推荐
图片翻转效果具体实现代码
Jan 09 Javascript
JS的get和set使用示例
Feb 20 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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
phpfans留言版用到的install.php
2007/01/04 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Python连接SQLServer2000的方法详解
2017/04/19 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
社会实践自我鉴定
2013/11/07 职场文书
公益活动策划方案
2014/01/09 职场文书
前台岗位职责
2015/02/13 职场文书
开学典礼观后感
2015/06/15 职场文书
法制教育主题班会
2015/08/13 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS