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;