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