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 +