zepto 添加 animate组件

Posted 2020-08-09 Juliana

今天发现JQuery可以用 animate方法回到顶部，心想着zepto应该也可以

$(\'html,body\').animate({ scrollTop: 0 }, 1000);

于是便用了一下，发现console提示zepto没有这个方法，百度之后发现原来不是没有这个方法，是因为这animate这个方法是在effects组件里的，然而默认的zepto是没有这个组件的，于是又倒腾了一下。

1.要安装node和npm

2.到https://github.com/madrobby/zepto下载zepto的包

3.到zepto的目录下编辑目录下的make文件，找到第41/42行，就是modules = (env[\'MODULES\'] || \'zepto event ajax form ie\').split(\' \')这么一行,增加或删除组件

4.到cmd，cd到zepto的目录，执行npm install回车，再执行npm run-script dist 回车，成功之后你应该可以看到

dist/zepto.js: 57.4 KiB
dist/zepto.min.js: 25.8 KiB
dist/zepto.min.gz: 9.6 KiB

接下来你就可以快乐地使用animate了，什么？不行，在踩了一个又一个坑之后，发现又来一个坑。zepto的animate()源码采用css3的方式进行，而scrollTop属性不在css3的动画属性中，所以没有生效。

解决方案见这篇博文http://www.cnblogs.com/skyHF/p/4720308.html