diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue index 5a0cd03141ff40516f9ac47727c7e6f40b4cf7ab..d909b11d446d6542e97c8c9de23b00ab35b5f0f1 100644 --- a/pages/CSS/transition/transition.uvue +++ b/pages/CSS/transition/transition.uvue @@ -39,6 +39,10 @@ 点击修改Transform + + 点击修改TransformTranslate + + 点击修改Transform和宽 @@ -89,6 +93,8 @@ propertyStyleBackground: null as UniElement | null, isTransitionStyleTransformWithOrigin: false, styleTransformWithOrigin: null as UniElement | null, + styleTransformTranslate: null as UniElement | null, + isTransformTranslate: false } }, onReady() { @@ -104,6 +110,7 @@ this.propertyStyleBackground = uni.getElementById("propertyStyleBackground") this.styleTransformWithOrigin = uni.getElementById("styleTransformWithOrigin") this.styleTransformWithWidth = uni.getElementById("styleTransformWithWidth") + this.styleTransformTranslate = uni.getElementById("transformTranslate") }, methods: { changeWidthOrHeight() { @@ -174,6 +181,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)'