javascript - 现在前端开发如果不用jquery如何实现一些特效？

Question

比如说我现在想用vue.js之类的前端mv*框架做一些后台富客户端应用，里面会用到比如说菜单鼠标划入之后自动伸缩，侧边栏的展开和关闭，手风琴之类的特效，是否仍然要引入jquery呢？如果不用jquery的话该怎么做呢？难道用原生js实现吗？

Answer 1

我就纳闷了。。所有人用了VUEJS就开始排斥JQ。 该用就用，做动效还是JQ方便啊（很多第三方的动效也需要它，比如JS的chart报表）。VUEJS就去做它该做的事儿去，分好工就可以了。 个人愚见。

Answer 2

Vue是一款 “渐进式”的框架，什么是渐进式？简单来说，提供给你各个开发阶段所需要的功能。从简单的 声明式渲染，到组件系统，路由系统（vue-router），状态管理器(vuex)乃至于开发者工具（vue-cli）。你可以仅仅使用它的一部分。因而在使用上，Vue真是需要的时候就可以使用，不想用的时候可以采用其他解决方案。Vue的项目不是“处处都使用Vue”,而是“以Vue为主体”。

至于jquery,完全可以引入项目。jQuery有现成的好的解决方案，何必去硬要去搞个Vue的版本呢？

Answer 3

首先，说下楼上各位的观点。既然用了vue或者react就不要再使用jQuery去破坏dom结构了。
如果喜欢jQuery也就不要去用vue，react或者angular。
这是两个时代的框架，千万别混用，你想想你的模块里面突然出现一段JQuery的dom操作代码，别人看了不懵逼才怪，怎么维护？不伦不类的代码……

------ 题主的问题-------

关于你说的那些特效，vue的transition 与 transition-group + css3动画或者transform完全可以做到，而且就算自己写也非常简单。包括react也有自己的动画模块，两者原理都差不多。
而且关于vue动画的插件github上也有一大堆，不过我还是建议自己写，毕竟自己写的代码在自己的可控范围之内。
请看官方文档：
关于动画过度的vue文档

---

另外再说一点jQuery的事情，大部分服务端的工程师是比较中意它的，比如java，php等，就像他们也喜欢bootstrap一样，因为上手简单，API稍微一看就能满足他们简单的需求。但其实作为一个专业前端工程师的话不是太喜欢这两个框架的，尤其jQuery写出来的代码感觉好丑陋。。。在现在vue与react火遍全球的时代，jQuery真的只是个过去式了。

Answer 4

添加一个表示控件状态的数据，如果划入，事件的处理方法把这个状态改变下，对应到模板上就是改变类名，这个时候根据类名加上动画就可以了。

Answer 5

animate.css

Answer 6

CSS3的 过渡 动画。炫的一批，没思路的可以看animate.css源码。 兼啥IE8

Answer 7

在用React的时候，我是放弃jQuery的，不是说jQuery不好用，是因为现代框架，如React，隔离了DOM操作并建立了一套事件机制，jQuery很多功能就不需要了，如选择器、事件绑定等，而诸如动画或ajax等功能可以使用更小的插件来替代，所以很多时候不希望为了jQuery的部分功能而引入整个jQuery库。
至于动效，优先考虑使用CSS3动画实现，复杂的动画可以引入js动画插件。

Answer 8

有能力就用 vanilla js，不行就还用 jQ 及其插件好了。

另外，一般而言，有 jQ 实现的动效插件，一般就会有 vanilla js 实现的动效插件，甚至有同一个插件里有 jQ 实现和 vanilla 实现，你可以拿 vanilla js 实现的动效插件来直接开发 Vue 的指令。

不管是采用什么方式，都需要注意一点，Vue 的方式是先 render 再 mount，因此要搞清原来插件的机制，如何初始化，如何设置参数……，然后按需在 Vue 生命周期钩子中添加相应的代码。