如何将动画添加到平均堆栈应用程序中

Question

我正在使用MEAN堆栈设计一个网站，虽然有很多教程指导如何使用MEAN堆栈开发Web应用程序，但我不确定在您的应用程序中添加动画的最佳方法是什么。具体来说，如果所有动画都只是坐在CSS中，那么html模板会引用这些类。如何使用HTML5画布添加高级动画功能，项目的哪个部分就是这样。在MEAN应用程序中添加动画的最通用和最干净的方法是什么？Ang-Animate在Angular中的方式是什么？

编辑：我特别想要实现的是一个盒子礼物的图像，礼物包裹在礼物中，左边挂着一条丝带。现在我想要一个小男孩/女孩从左到右拖动色带并打开礼物。最好的方法是什么，这与MEAN堆栈很吻合？

Answer 1

这是一个非常广泛的问题。这完全取决于你希望实现的动画类型。

尽管如此，这里有一些我最喜欢的基于经验的图书馆：

AOS（滚动动画） -

它是一个纯CSS3驱动的动画库，可以通过许多有用的方式激活HTML元素。

演示：static

代码：http://michalsnik.github.io/aos/

<强>实施： 您可以使用包管理器（npm或bower）进行安装以在项目中使用。或直接下载源代码。

Spark Scroll -

一个Javascript库，它还处理基于滚动的动画，以及基于视图端口可见性的动画。非常强大，可用于执行以下操作：滚动到视图时在HTML元素上绘制边框，根据视口可见性（即不透明度）触发样式更改，以及许多其他内容。此外，非常可定制。

演示： https://github.com/michalsnik/aos

代码： http://gilbox.github.io/spark-scroll/demo/

实施：

不幸的是，此库没有本机Javascript实现。使用Spark Scroll需要使用ReactJS（Facebook）或Angular（Google）。

最后但并非最不重要的，

WOW.js -

另一个处理大量不同动画的Javascript库。

演示： https://github.com/gilbox/spark-scroll

代码： http://mynameismatthieu.com/WOW/

实施： https://github.com/matthieua/WOW

老实说，我建议您编辑帖子并确定您要完成的内容。在您使用我提供的资源进行一些研究并确定您希望实施的动画后，我将更新此答案。