提交 18d50503 编写于 作者: D DeepKolos

根据PR建议做调整, 增加scoped和抽离出函数

上级 fc7b1447
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
}; };
</script> </script>
<style> <style scoped>
.page-cell{ .page-cell{
height: 130vh; height: 130vh;
} }
......
...@@ -126,6 +126,13 @@ export default { ...@@ -126,6 +126,13 @@ export default {
return `translate3d(${offset}px, 0, 0)`; return `translate3d(${offset}px, 0, 0)`;
}, },
setAnimations(on) {
var val = on ? null : '0ms';
this.wrap.style.transitionDuration = val;
this.rightWrapElm.style.transitionDuration = val;
this.leftWrapElm.style.transitionDuration = val;
},
swipeMove(offset = 0) { swipeMove(offset = 0) {
this.wrap.style.webkitTransform = this.translate3d(offset); this.wrap.style.webkitTransform = this.translate3d(offset);
this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset); this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
...@@ -172,9 +179,7 @@ export default { ...@@ -172,9 +179,7 @@ export default {
if (this.opened) { if (this.opened) {
if (!this.swiping) { if (!this.swiping) {
this.swipeMove(0); this.swipeMove(0);
this.wrap.style.transitionDuration = null; this.setAnimations(true);
this.rightWrapElm.style.transitionDuration = null;
this.leftWrapElm.style.transitionDuration = null;
} }
this.opened = false; this.opened = false;
return; return;
...@@ -189,9 +194,7 @@ export default { ...@@ -189,9 +194,7 @@ export default {
const y = Math.abs(offsetTop); const y = Math.abs(offsetTop);
const x = Math.abs(offsetLeft); const x = Math.abs(offsetLeft);
this.wrap.style.transitionDuration = '0ms'; this.setAnimations(false);
this.rightWrapElm.style.transitionDuration = '0ms';
this.leftWrapElm.style.transitionDuration = '0ms';
if (this.direction === null) { if (this.direction === null) {
this.direction = x > y ? 'horizonal' : 'vertical'; this.direction = x > y ? 'horizonal' : 'vertical';
...@@ -216,9 +219,7 @@ export default { ...@@ -216,9 +219,7 @@ export default {
endDrag() { endDrag() {
this.direction = null; this.direction = null;
this.wrap.style.transitionDuration = null; this.setAnimations(true);
this.rightWrapElm.style.transitionDuration = null;
this.leftWrapElm.style.transitionDuration = null;
if (!this.swiping) return; if (!this.swiping) return;
this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1); this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册