From 52bac8b79b1fc679357c6cc3e18e39416eb6f927 Mon Sep 17 00:00:00 2001
From: XHY <xionghuayu@dcloud.io>
Date: Fri, 26 Apr 2024 16:18:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20transition=20transform-tra?=
 =?UTF-8?q?nslate=20=E9=80=9A=E8=BF=87%=E6=AF=94=E5=81=9A=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/transition/transition.uvue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index 5a0cd031..d909b11d 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -39,6 +39,10 @@
         <text class="text">点击修改Transform</text>
         <view class="base-style transition-transform" id="styleTransform" @click="changeTransform"></view>
       </view>
+      <view class="container">
+        <text class="text">点击修改TransformTranslate</text>
+        <view class="base-style transition-transform" id="transformTranslate" @click="changeTransformTranslate"></view>
+      </view>
       <view class="container">
         <text class="text">点击修改Transform和宽</text>
         <view class="base-style transition-transform-width" id="styleTransformWithWidth" @click="changeTransformWithWidth"></view>
@@ -89,6 +93,8 @@
         propertyStyleBackground: null as UniElement | null,
         isTransitionStyleTransformWithOrigin: false,
         styleTransformWithOrigin: null as UniElement | null,
+        styleTransformTranslate: null as UniElement | null,
+        isTransformTranslate: false
       }
     },
     onReady() {
@@ -104,6 +110,7 @@
       this.propertyStyleBackground = uni.getElementById("propertyStyleBackground")
       this.styleTransformWithOrigin = uni.getElementById("styleTransformWithOrigin")
       this.styleTransformWithWidth = uni.getElementById("styleTransformWithWidth")
+      this.styleTransformTranslate = uni.getElementById("transformTranslate")
     },
     methods: {
       changeWidthOrHeight() {
@@ -174,6 +181,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)'
-- 
GitLab