diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue index 2b7b374d836a8e6eb0944b95dcb13682490f5334..1757a8e9af9b4ded66f95a900e89bc8b61acd7d0 100644 --- a/pages/CSS/transition/transition.uvue +++ b/pages/CSS/transition/transition.uvue @@ -33,6 +33,10 @@ 点击修改Transform + + 点击修改TransformTranslate + + 点击修改Transform和宽 @@ -82,6 +86,8 @@ propertyStyleBackground: null as UniElement | null, isTransitionStyleTransformWithOrigin: false, styleTransformWithOrigin: null as UniElement | null, + styleTransformTranslate: null as UniElement | null, + isTransformTranslate: false } }, onReady() { @@ -96,6 +102,7 @@ this.propertyStyleBackground = uni.getElementById("propertyStyleBackground") this.styleTransformWithOrigin = uni.getElementById("styleTransformWithOrigin") this.styleTransformWithWidth = uni.getElementById("styleTransformWithWidth") + this.styleTransformTranslate = uni.getElementById("transformTranslate") }, methods: { changeWidthOrHeight() { @@ -159,6 +166,11 @@ ) this.isTransitionStyleTransform = !this.isTransitionStyleTransform }, + changeTransformTranslate() { + const translate = this.isTransformTranslate ? `translate(0%,0%)` : `translate(100%,0%)` + this.styleTransformTranslate?.style?.setProperty('transform', translate) + this.isTransformTranslate = !this.isTransformTranslate + }, changeTransformWithWidth() { this.styleTransformWithWidth?.style?.setProperty("transform", this.isTransitionStyleTransformWithWidth ? 'rotate(0deg)'