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)'