javascript - 现在前端开发如果不用jquery如何实现一些特效?
阿神
阿神 2017-04-11 12:22:38
0
8
272

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

阿神
阿神

闭关修行中......

全部回覆 (8)
阿神

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

    大家讲道理

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

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

      Peter_Zhu

      首先,说下楼上各位的观点。既然用了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真的只是个过去式了。

        伊谢尔伦

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

          PHPzhong

          animate.css

            Ty80

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

              左手右手慢动作

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

                巴扎黑

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

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

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

                  最新下載
                  更多>
                  網站特效
                  網站源碼
                  網站素材
                  前端模板
                  關於我們 免責聲明 Sitemap
                  PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!