Coder Social home page Coder Social logo

alloyteam / phytouch Goto Github PK

View Code? Open in Web Editor NEW
3.0K 160.0 528.0 3.93 MB

Smooth scrolling, rotation, pull to refresh, page transition and any motion for the web - 丝般顺滑的触摸运动方案

Home Page: http://alloyteam.github.io/PhyTouch/

License: MIT License

JavaScript 84.72% CSS 0.19% HTML 15.08%
touch scrolling scroll transform transformations motion transformjs css3transform

phytouch's People

Contributors

dntzhang avatar fjc0k avatar gtopia avatar helkyle avatar inarol avatar mtnbgx avatar nice-plq avatar rikumi avatar solarcellsky avatar vincentpat avatar whoiam2007s avatar zgayjjf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

phytouch's Issues

spring: false这个效果触发不了

Demo里关闭回弹效果的spring: false貌似是假的吧,review了源码,发现根本没有spring属性。那现在想要关闭回弹让它到了max,min直接划不过去怎么做?

transform.JS rotate旋转问题

我每一次执行dom.rotateZ += 45;
当dom.rotateZ = 180,540,900...的时候绑定的这个元素 会反向旋转225度;
这与我需要的效果不符,要怎样 才会跟原始的一样?

使用了AlloyTouch <a>会失效吗

使用了AlloyTouch A会失效吗
貌似ios不会 android会 pc浏览器也会

this.preventDefaultException = { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ };是这句吗

animationEnd不会触发

看了下源码,好像是在_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後的click

請問使用alloytouch後,該元素裡面的元素可以有onclick或touch事件?
目前做側滑選單,設置為alloyTouch 後,內的清單無法點取

AlloyTouch ‘’min‘’属性 计算不准确

也可能是我自己的原因,想问下:
比如
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的值 发现刷新之后 值就变了 有点 不理解 ,请作者指点下...谢谢!!!

About Passive Event Listeners

Description

  1. Chrome Device Mode
  2. Chrome version tested:
    • Chrome/54.0.2840.87
    • Chrome Canary: Chrome/56.0.2916.0
  3. File Version: alloy_touch.js latest(0.1.3).

Problem

image

Reference

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.

Reproduce

Open http://alloyteam.github.io/AlloyTouch/example/carousel.html on a Chrome 54+ browser or Chrome Canary, and enable device mode.

select测试

AlloyTouch 的 select 插件,选项会重复,可以禁止重复吗,我传入的数据有三个选项,但是插件显示了六个

vue2.0

vue2.0 可以直接 import 进来吗?

会加入Chrome Passive的支持吗?

在新版本的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();
            }

如果想做一个几个区域联动的要如何实现?

比如我有一个十列的列表, 左侧第一列为固定宽度,右边的九列自动延伸出页面外,当我左右移动那九列的时候,页面可以横向移动。当我上下移动每一行时,左边一列和右边九列可以同时移动。

使用webpack 导入 alloyTouch 和alloyTouch_fullPage插件

关于在webpack 中导入alloy 插件的问题,想通过webpack alloy-touch-fullpage 做个页面。。。

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; 才能导出插件

fullpage

似乎并不支持多动画
执行完当前动画需要执行另外一个动画就不太好用data来处理了

能否直接提供出回弹距离的api

因为要考虑到:"列表页的做上拉加载,和下拉刷新需要一个值来触发判断"。目前好像没有看见有对外提供的api,希望能添加一个!另外希望完善下文档和在webapck下引进插件相关配置。

alloytouch是不是与hammerjs不兼容

alloytouch是不是与hammerjs不兼容,我之前有一个功能依赖了hammer,后来看到alloytouch,然后把alloytouch引用过来,发现之前依赖hammmerjs做的功能无效了

关于min参数的一点疑惑

  • min参数是必需的吗?那源码注释”不必需“是为什么呢
  • min参数如何计算
  • min参数无法动态计算,那如何做手机适配

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.