diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index d30476e944ee345e921df9483cf637da0bba2b0a..2b7b374d836a8e6eb0944b95dcb13682490f5334 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -7,6 +7,10 @@
点击修改宽度
+
+ 点击修改宽度(递增)
+
+
点击修改Margin
@@ -57,6 +61,8 @@
return {
isTranstionWidthOrHeight: false,
widthOrHeight: null as UniElement | null,
+ widthProgress: null as UniElement | null,
+ progressWidth: 200,
isTranstionChangeMargin: false,
styleMargin: null as UniElement | null,
isTransitionStylePadding: false,
@@ -80,6 +86,7 @@
},
onReady() {
this.widthOrHeight = uni.getElementById("widthOrHeight")
+ this.widthProgress = uni.getElementById("widthProgress")
this.styleMargin = uni.getElementById("styleMargin")
this.stylePadding = uni.getElementById("stylePadding")
this.styleBackground = uni.getElementById("styleBackground")
@@ -97,6 +104,10 @@
: '300px')
this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
},
+ changeWidthProgress() {
+ this.progressWidth += 20
+ this.widthProgress?.style?.setProperty("width", this.progressWidth + 'px')
+ },
changeMargin() {
this.styleMargin?.style?.setProperty("margin-top", this.isTranstionChangeMargin
? '0px'
@@ -201,6 +212,17 @@
background-color: brown;
}
+ .width-progress {
+ width: 200px;
+ height: 200px;
+ background-color: brown;
+ }
+
+ .transform-bgColor {
+ transition-property: background-color;
+ transition-duration: 0.5s;
+ }
+
.transition-width {
transition-property: width;
transition-duration: 1s;