diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index 5b26c35d7b10afa31c3bc337acbe4c8e61bafb5d..74c5d6b273427d06a8e3054182cf368b88da7083 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -21,10 +21,18 @@
点击修改Background
+
+ 动态修改Background
+
+
点击修改Transform
+
+ 点击修改Transform(含transform-origin)
+
+
点击修改Border
@@ -57,6 +65,11 @@
styleBorder: null as Element | null,
isTransitionstylePosition: false,
stylePosition: null as Element | null,
+ isSetTransition: false,
+ isTransitionpropertystyleBackground: false,
+ propertyStyleBackground: null as Element | null,
+ isTransitionStyleTransformWithOrigin: false,
+ styleTransformWithOrigin: null as Element | null,
}
},
onReady() {
@@ -67,6 +80,8 @@
this.styleTransform = uni.getElementById("styleTransform")
this.styleBorder = uni.getElementById("styleBorder")
this.stylePosition = uni.getElementById("stylePosition")
+ this.propertyStyleBackground = uni.getElementById("propertyStyleBackground")
+ this.styleTransformWithOrigin = uni.getElementById("styleTransformWithOrigin")
},
methods: {
changeWidthOrHeight() {
@@ -107,6 +122,18 @@
)
this.isTransitionstyleBackground = !this.isTransitionstyleBackground
},
+ propertyChangeBackground() {
+ if (!this.isSetTransition) {
+ this.propertyStyleBackground?.style?.setProperty("transition-property", "background-color")
+ this.propertyStyleBackground?.style?.setProperty("transition-duration", "1000")
+ this.isSetTransition = true
+ }
+ this.propertyStyleBackground?.style?.setProperty("background-color", this.isTransitionpropertystyleBackground
+ ? 'brown'
+ : 'black'
+ )
+ this.isTransitionpropertystyleBackground = !this.isTransitionpropertystyleBackground
+ },
changeTransform() {
this.styleTransform?.style?.setProperty("transform", this.isTransitionStyleTransform
? 'rotate(0deg)'
@@ -114,6 +141,13 @@
)
this.isTransitionStyleTransform = !this.isTransitionStyleTransform
},
+ changeTransformWithOrigin() {
+ this.styleTransformWithOrigin?.style?.setProperty("transform", this.isTransitionStyleTransformWithOrigin
+ ? 'scaleX(1)'
+ : 'scaleX(0)'
+ )
+ this.isTransitionStyleTransformWithOrigin = !this.isTransitionStyleTransformWithOrigin
+ },
changeBorder() {
this.styleBorder?.style?.setProperty("border-color", this.isTransitionstyleBorder
? 'brown'
@@ -186,4 +220,4 @@
transition-property: left;
transition-duration: 1000;
}
-
\ No newline at end of file
+