Pull element in four directions
npm install kobe-pull-elementLightweight, high-performance and smooth pull element effect that support all directions
- Lightweight, 6kb
- High performance, native scrolling, 60fps
- No dependent, just vanilla.js
- flexible, support top|right|down|left all the directions
With npm
``shell`
npm install --save pull-element
How to import pull-element
`javascript
// ES2015 style
import PullElement from 'pull-element'
// commonjs style
var PullElement = require('pull-element')
`
With script tag
`html`
Note: these demo were inspired by framework7
- Playgound: view-source，DEMO
- Pull To Refresh: view-source，DEMO
- Swipe To Show Action: view-source，DEMO
- Animated Tabs: view-source，DEMO
- Swipeable Tabs: view-source，DEMO
- Slider Horizontal: view-source，DEMO
- Vertical Swiper: view-source，DEMO
- Space Between Slides: view-source，DEMO
PullElement is a constructor function, receive an argument options which should be an object.
Use the keyword new to get its instance, and then call the init method to initialize.
`javascript`
var pullElement = new PullElement(options)
pullElement.init()
target can be a selector or a dom-element, the default value is 'body'
target is used to be the target who will be setted transform|translate style when user is touching.
scroller can be a selector or a dom-element, if it's empty, then the target will be the scroller
This option must works with other options detectScroll|detectScrollOnStart.
If one of detectScroll|detectScrollOnStart is true, the target will only translate when scroller reach the ending.
trigger can be a selector or a dom-element, if it's empty, then the target will be the trigger.
When user is touching the trigger, it occur the pull element effect.
damping can be a number or a function, the default value is 1.6.
If the duration of touch is x, and the damping is y, then the translate d is: d = x/y.
If damping is a function ,then d is: d = y(x).
Enable pulling element up, the default value is false.
Enable pulling element down, the default value is false.
Enable pulling element left, the default value is false.
Enable pulling element right, the default value is false.
Enable detect scroller status, the default value is false.
When detectScroll is true, it will start pulling element when the scroller reached the ending.
If this option is true, it will detech scroll status on both touchstart and touchmove.
Enable detech scroller status on touchstart, the default value is false.
If this option is true, and detectScroll option is false, it will only detech scroll status on touchstart event.
Enable stopPropagation on touchstart, the default value is false
This option is used to support nesting pull-element effect.
Enable drag effect, the default value is fasle
The default behavior of pulling element is only in one axis, and translate-value of the other axis will be setted to zero.
If this option is true, the target will translate in both x-axis and y-axis.
The duration of transition, the default value is 0.3s
When user stop touching, the default behavior is that target animate to the origin.
The timing function of transition, the default value is ease-out
When user stop touching, the default behavior is that target animate to the origin.
Enable wait for animating to the origin, the default value is true.
When user stop touching, the default behavior is that target animate to the origin, the trigger will not response the touching event in this time.
If this options is false, user can touch the trigger again.
Enable and response the Direction of pulling, Direction can be one of Up|Down|Left|Right.
The function will receive one argument data when user pulling the elment.
data is an object. it has two property translateX|translateY, both of them were calculated by damping.
If the function has called method this.preventDefault(), it will prevent the default behavior. In this case, target will not be setted translate style.
`javascript`
var pullElement = new PullElement({
onPullUp: function(data) {
var translateX = data.translateX
var translateY = data.translateY
this.preventDefault()
}
})
pullElement.init()
Enable the Direction of pulling, and response the event of stop pulling, Direction can be one of Up|Down|Left|Right.
The function will receive one argument data when user pulling the elment.
data is an object. it has two property translateX|translateY, both of them were calculated by damping.
If the function has called method this.preventDefault(), it will prevent the default behavior. In this case, target will not animate to origin.
`javascript`
var pullElement = new PullElement({
onPullUpEnd: function(data) {
var translateX = data.translateX
var translateY = data.translateY
this.preventDefault()
}
})
pullElement.init()
Initialize the pull-element effect, and add touch event listeners.
Destroy the instance of PullElement, and remove touch event listeners.
Add touch event listeners.
Remove touch event listeners.
Set translate style of target, translateX and translateY must be number.
You can use this method to set translate style directly after calling this.preventDefault().
Animate to some where, translateX and translateY is the same type in setTranslate.
The third argument callback is a function, it will be invoked when animation has been over.
If es6-promise is supported, this method will return a promise, so you can use async/await or then method to handle the ending of animation.
Animate to origin, it's equal to this.animateTo(0, 0, callback), but more, see below.
If option wait is true, it will call animateToOrigin automatically after pull{Direction}End(Note: If you call this.preventDefault in it, you should call this.animateToOrigin manually to stop waiting).
Prevent the default behavior. This method should only be invoked by function onPull{Direction} or onPull{Direction}End
When this method is invoked by onPull{Direction}, the default behavior is this.setTranslate(translateX, translateY).
When this method is invoked by onPull{Direction}End, the default behavior is this.animateToOrigin()`.