Angular4 - fly to cart动画 -弥补animation的不足

Angular4动画

Angular2升级到Angular4之后，AOT编译和tree shake 使得代码体积极剧减少，另外动画模块独立出来，有需要时再引入，使得的不用动画的工程就没必要再引入，此举也使得那些应用的代码体积也得到减小。

Angular4动画跟1.x相比功能略有加强，但是也只是状态的转换过程中的动画，路由转场的动画，在实现酷炫效果的场景中还略显不足。本文将举例说明如何比较正确的使用Angular4 和jQuery来实现比较浮夸的动画，让你的应用酷炫起来，与众不同！

先睹为快！

飞到购物车动画截图

1、live demo：http://frontgreeks.coding.me/#/animates

2、github地址：https://github.com/linweiwei123/angular4-flytocart

说明在前头

本工程不是一个封装好的插件，只是一个实现方案；工程中有些无关紧要的代码，可以不看。只需关注animation模块，代码中如有不足之处，希望各网友多多指教。

步骤：1、下载工程；2、执行npm install；3、执行npm run start；4：访问localhost:4200

实现方案：

该工程实现了一个将商品添加到购物车时，商品能够根据计算当前购物车位置，当前商品位置，商品在一定时间内飞向购物车，并且在飞行过程中，图片不断缩小为0，飞到购物车后，购物车数量+1；已添加的商品标识为已添加，并且不能再次添加；

一、计算购物车位置

计算购物车位置

二、商品列表

很简单的商品列表

遍历商品列表；状态为added的样式是为了显示“已经添加”的状态；

三、点击商品位置，复制商品图片，设置样式为了飞向购物车做准备

初始化商品信息和购物车位置

初始化商品列表信息，购物车位置信息，考虑到购物车位置可能会变，这里得益于RxJS技术，可以订阅到最新的购物车位置信息；

四、用jQuery和css知识来实现飞向购物车

如上图中所示，这里合理使用了jQuery来实现。网友可能会说，Angular最好不要和jQuery一起使用，那样会跟Angular的机制冲突。Angular的机制跟jQuery的绑定事件是冲突的，二者不可一起使用，但是如果知识获取dom元素，做一些简单的动画。而且这些元素上的的信息跟model中的没有任何关系则完全可以使用，如本例中的用法；

飞向购物车之后，购物车总数加1。这就完成了fly to cart的功能了。本例比较简单，总体思路也比较清晰。

作者寄语：

沉寂了一段时间，没有更新微博，但这段时间内我持续关注着Angular的发展。Angular现在的发展势头跟vue比差了很多，github上Vue每天的star数量是angular的4倍以上，各论坛的文章充斥着vue的文章，唯独不见Angular。但是相信，Angular总有一天独占鳌头，他的开发者看的更远，想的更深。本周六ng-japan大会，我们会后见！

另外谁说我们国内大网站没有使用Angular2的，给大家带来一个案例！就是跟我们一样不与世同的锤子手机官网！（下图所示，已经编译，但仍可看出Angular2的影子）

锤子手机官网一开始使用angularjs，去年看他的网站性能很差，页面呈现慢，操作不流畅，今年升级ng2之后性能极大的改善了，这是一个非常励志的消息！

锤子手机官网编译后的com.js解析