diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index ae8a5e5394013c390219a05fb5807a4e5da753ca..6310eedeb61e85539901e86504c5067c9e3895eb 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -45,6 +45,10 @@
点击修改TransformTranslate
+
+
+ 在组件内滑动测试是否闪动
+
点击修改Transform和宽
@@ -99,8 +103,12 @@
propertyStyleBackground: null as UniElement | null,
isTransitionStyleTransformWithOrigin: false,
styleTransformWithOrigin: null as UniElement | null,
- styleTransformTranslate: null as UniElement | null,
- isTransformTranslate: false
+ styleTransformTranslate: null as UniElement | null,
+ isTransformTranslate: false,
+ styleTransformTranslateScale: null as UniElement | null,
+ startX: 0,
+ moveX: 0,
+ oldX: 0,
}
},
onReady() {
@@ -117,7 +125,8 @@
this.propertyStyleBackground = uni.getElementById("propertyStyleBackground")
this.styleTransformWithOrigin = uni.getElementById("styleTransformWithOrigin")
this.styleTransformWithWidth = uni.getElementById("styleTransformWithWidth")
- this.styleTransformTranslate = uni.getElementById("transformTranslate")
+ this.styleTransformTranslate = uni.getElementById("transformTranslate")
+ this.styleTransformTranslateScale = uni.getElementById("styleTransformTranslateScale")
},
methods: {
changeWidthOrHeight() {
@@ -232,6 +241,21 @@
: '100px'
)
this.isTransitionstylePosition = !this.isTransitionstylePosition
+ },
+ handleTouchStart(e : UniTouchEvent) {
+ this.startX = e.changedTouches[0].clientX
+ },
+ handleTouchMove(e : UniTouchEvent) {
+ console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY);
+ e.preventDefault()
+ e.stopPropagation()
+ const difX = e.changedTouches[0].clientX
+ this.moveX = difX - this.startX + this.oldX
+ this.styleTransformTranslateScale?.style?.setProperty('transition-duration', '0ms')
+ this.styleTransformTranslateScale?.style?.setProperty('transform', `translate(${this.moveX}px,0px) scale(0.5)`)
+ },
+ handleTouchEnd(_ : UniTouchEvent) {
+ this.oldX = this.moveX
},
},
}