提交 c3a3f49c 编写于 作者: DCloud-yyl's avatar DCloud-yyl

适配web端,setProperty的属性名称参数由驼峰字符调整使用"-"连接字符

上级 13a20d2b
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
}, },
methods: { methods: {
onHalfTouchStart(_ : TouchEvent) { onHalfTouchStart(_ : TouchEvent) {
this.halfNode?.style?.setProperty('transitionDuration', 0); this.halfNode?.style?.setProperty('transition-duration', 0);
}, },
onHalfTouchMove(e : TouchEvent) { onHalfTouchMove(e : TouchEvent) {
if (this.bAnimation) {//容错处理 if (this.bAnimation) {//容错处理
...@@ -98,30 +98,30 @@ ...@@ -98,30 +98,30 @@
if (show) { if (show) {
top = this.totalHeight * 30 / 100; //计算显示的位置 top = this.totalHeight * 30 / 100; //计算显示的位置
this.halfNode?.style?.setProperty('visibility', 'visible'); this.halfNode?.style?.setProperty('visibility', 'visible');
this.halfNode?.style?.setProperty('transitionTimingFunction', 'ease-in-out'); this.halfNode?.style?.setProperty('transition-timing-function', 'ease-in-out');
} else { } else {
this.halfNode?.style?.setProperty('transitionTimingFunction', 'linear'); this.halfNode?.style?.setProperty('transition-timing-function', 'linear');
time *= (this.halfHeight / this.totalHeight); //计算关闭动画时间 time *= (this.halfHeight / this.totalHeight); //计算关闭动画时间
} }
this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0)+"ms"); this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+"ms");
this.halfNode?.style?.setProperty('transitionProperty', 'top'); this.halfNode?.style?.setProperty('transition-property', 'top');
this.halfNode?.style?.setProperty('top', top.toFixed(2)); this.halfNode?.style?.setProperty('top', top.toFixed(2));
setTimeout(() => { setTimeout(() => {
if (!show) { if (!show) {
this.halfNode?.style?.setProperty('visibility', 'hidden'); this.halfNode?.style?.setProperty('visibility', 'hidden');
this.halfNode?.style?.setProperty('transitionDuration', 0); this.halfNode?.style?.setProperty('transition-duration', 0);
this.halfNode?.style?.setProperty('transform', ''); this.halfNode?.style?.setProperty('transform', '');
} }
this.halfNode?.style?.setProperty('transitionProperty', ''); this.halfNode?.style?.setProperty('transition-property', '');
this.bAnimation = false; this.bAnimation = false;
}, time) }, time)
this.bAnimation = true; this.bAnimation = true;
}, },
resumeHalfScreen() { resumeHalfScreen() {
let time = 300;//(500*this.halfOffset/this.halfHeight).toFixed(0); //回弹动画时间 let time = 300;//(500*this.halfOffset/this.halfHeight).toFixed(0); //回弹动画时间
this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0)+"ms"); this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+"ms");
this.halfNode?.style?.setProperty('transitionTimingFunction', 'ease-in-out'); this.halfNode?.style?.setProperty('transition-timing-function', 'ease-in-out');
this.halfNode?.style?.setProperty('transitionProperty', 'transform'); this.halfNode?.style?.setProperty('transition-property', 'transform');
this.halfNode?.style?.setProperty('transform', 'translateY(0px)'); this.halfNode?.style?.setProperty('transform', 'translateY(0px)');
this.halfMove = false; this.halfMove = false;
this.scrollNode?.setAttribute('scroll-y', 'true'); this.scrollNode?.setAttribute('scroll-y', 'true');
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
this.halfOffset = 0; this.halfOffset = 0;
setTimeout(() => { setTimeout(() => {
this.bAnimation = false; this.bAnimation = false;
this.halfNode?.style?.setProperty('transitionProperty', ''); this.halfNode?.style?.setProperty('transition-property', '');
}, time) }, time)
this.bAnimation = true; this.bAnimation = true;
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册