alloyteam / phytouch Goto Github PK
View Code? Open in Web Editor NEWSmooth scrolling, rotation, pull to refresh, page transition and any motion for the web - 丝般顺滑的触摸运动方案
Home Page: http://alloyteam.github.io/PhyTouch/
License: MIT License
Smooth scrolling, rotation, pull to refresh, page transition and any motion for the web - 丝般顺滑的触摸运动方案
Home Page: http://alloyteam.github.io/PhyTouch/
License: MIT License
有没有测试过react中兼容吗?
Demo里关闭回弹效果的spring: false貌似是假的吧,review了源码,发现根本没有spring属性。那现在想要关闭回弹让它到了max,min直接划不过去怎么做?
我每一次执行dom.rotateZ += 45;
当dom.rotateZ = 180,540,900...的时候绑定的这个元素 会反向旋转225度;
这与我需要的效果不符,要怎样 才会跟原始的一样?
使用了AlloyTouch A会失效吗
貌似ios不会 android会 pc浏览器也会
this.preventDefaultException = { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ };是这句吗
就是 touchmove到web视窗边界的时候自己去触发touchend。
看了下源码,好像是在_to这个函数里调用onEnd,但是时间点判断有问题:
var beginTime = new Date();
var self = this;
var toTick = function () {
var dt = new Date() - beginTime;
if (dt >= time) { //time为200或600,而dt只有若干毫秒
el[property] = value;
onChange && onChange.call(self, value);
onEnd && onEnd.call(self, value);
return;
}
el[property] = dv * ease(dt / time) + current;
self.tickID = requestAnimationFrame(toTick);
//cancelAnimationFrame必须在 tickID = requestAnimationFrame(toTick);的后面
onChange && onChange.call(self, el[property]);
};
toTick();
在同步方法里直接调用两次new Date(),把这个时间差用于触发onEnd
这个逻辑没有看懂
請問使用alloytouch後,該元素裡面的元素可以有onclick或touch事件?
目前做側滑選單,設置為alloyTouch 後,內的清單無法點取
也可能是我自己的原因,想问下:
比如
var target = document.querySelector("#wrapper-scroll");
Transform(target, true);
var at = new AlloyTouch({
touch: "#wrapper",
vertical: true,
target: target,
min: window.innerHeight - 100 - parseInt(getComputedStyle(target).height),
.........
})
因为 min 是控制滚动属性的最小值,所以 用一个js属性去获取没有写死。
有的时候 算的是正常的 ,有的时候 算的不准。
打印min和target的值 发现刷新之后 值就变了 有点 不理解 ,请作者指点下...谢谢!!!
1、AlloyTouch最小高度 怎么计算
2、AlloyTouch在ios滚动不流畅 怎么回事
应该是禁止了默认的触摸事件,所以做不到overflow:scroll
讲道理这样的页面用触摸板滚动的时候,每次只能翻一页吧
如果一个元素使用了Transform,在其子元素上使用Transform会变模糊
1、页面 new AlloyTouch 时,如果容器高度小于页面高度报错:
Uncaught the min value can't be greater than the max value.
2、页面中的超链接无法跳转。
小米5,图片列表页面滚动动画出现丢帧
建议full_page做成vue插件形式
According to the given link
AddEventListenerOptions defaults passive to false. We propose sometimes defaulting this to true in some "document level" scenarios. Specifically if an event listener is added to the document, body, or window and is a scroll blocking (touchstart, touchmove) listener it will be have its default to be true.If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.This is behind a flag starting in Chrome 54.
Open http://alloyteam.github.io/AlloyTouch/example/carousel.html on a Chrome 54+ browser or Chrome Canary, and enable device mode.
AlloyTouch 的 select 插件,选项会重复,可以禁止重复吗,我传入的数据有三个选项,但是插件显示了六个
放缩 会导致卡死
AlloyTouch.Button touchMove 为什么没有option ?
故意的?
threejs旋转问题中:
factor: 0.005,
moveFactor: 0.05,
以上这样惯性不正常(会往反方向运动),然而根据,http://alloyteam.github.io/AlloyTouch/example/threejs/的demo里的参数
factor: 0.08,
moveFactor: 0.01,
惯性就正常了,
接下来问题来了,想要增大阻力让运动变小,就没辙了。请问这算bug伐?
容器内没东西,无限触发上拉下拉事件
容器里内容增加或者减少,容器的高度都不变?滑动区域也不变,有没有update方法
在微信里头,向下或向上都会有卡的现象,是我代码问题?
http://topics.byheart.cc/20161228yema/
[Vue warn]: Failed to resolve directive: alloytouch
为什么总是报这种错
vue2.0 可以直接 import 进来吗?
好像有一些问题
在新版本的chrome里 一直提示如下:
“Unable to preventDefault inside passive event listener due to target being treated as passive”
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
if (this.preventDefault && !preventDefaultTest(evt.target, this.preventDefaultException)) {
evt.preventDefault();
}
比如我有一个十列的列表, 左侧第一列为固定宽度,右边的九列自动延伸出页面外,当我左右移动那九列的时候,页面可以横向移动。当我上下移动每一行时,左边一列和右边九列可以同时移动。
还是未完成
具体怎么实现用alloytouch来写一个带tabs的navigation。
import AlloyTouch from 'libpath/alloy_touch';
import FullPage from 'libpath/alloy_touch_full_page';
console.log(typeof AlloyTouch); //undefined
console.log(typeof FullPage); //undefined
得到的竟然是 undefined
alloyTouch 的插件使用umd 的方式导出,
if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = AlloyTouch;
} else {
window.AlloyTouch = AlloyTouch;
}
可是怎么会在webpack中获取不到,
只有
//if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = AlloyTouch;
//} else {
// window.AlloyTouch = AlloyTouch;
//}
像这样注释掉其他 只留下 module.exports = AlloyTouch;
才能导出插件
似乎并不支持多动画
执行完当前动画需要执行另外一个动画就不太好用data来处理了
比如说我想先rotateX(45deg)
,再translateZ(100px)
,如果直接用transformJS写 el.roateX =45;el.translateZ = 100
的话,结果是先translateZ,再rotate的。请问有什么办法可以像CSS那样?
abwang反馈。记录一下~~
三个选项卡,选项卡点击事件为滚动到顶部translataY=0,在运动惯性滚动中点击了这个tab,会到0然后瞬间回到惯性滚动位置,有好的思路没有?点击的时候终止这个惯性滚动
补充,现在只有手机不清楚是否js加载失败
访问如下:http://alloyteam.github.io/AlloyTouch/example/threejs
bug描述:拖拽后在惯性的时候没有停下来,就执行第二次拖拽,盒子不见了!
复现率:100%;
因为要考虑到:"列表页的做上拉加载,和下拉刷新需要一个值来触发判断"。目前好像没有看见有对外提供的api,希望能添加一个!另外希望完善下文档和在webapck下引进插件相关配置。
alloytouch是不是与hammerjs不兼容,我之前有一个功能依赖了hammer,后来看到alloytouch,然后把alloytouch引用过来,发现之前依赖hammmerjs做的功能无效了
当页面中有input,textarea, 软键盘回去的时候,会有空白,怎么下拉都回不到顶部了
bug重现:在输入框输入文字,不缩回软键盘上拉下拉都会有问题 @dntzhang
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.