zepto 添加 animate组件

今天发现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

转载于:https://www.cnblogs.com/Juliana1992/p/5885312.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值