From 40085b6e035c042d01a48348b79107007ac62890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=A3=8A?= <1633537611@qq.com>
Date: Wed, 18 Oct 2023 15:43:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0transition=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  8 +++
 .../transition-event/transition-event.test.js | 16 +++++
 .../transition-event/transition-event.uvue    | 64 +++++++++++++++++++
 pages/pages.test.js                           |  1 +
 pages/tabBar/component.uvue                   |  4 ++
 5 files changed, 93 insertions(+)
 create mode 100644 pages/component/transition-event/transition-event.test.js
 create mode 100644 pages/component/transition-event/transition-event.uvue

diff --git a/pages.json b/pages.json
index a518c8af..f7655584 100644
--- a/pages.json
+++ b/pages.json
@@ -1001,6 +1001,14 @@
         "navigationBarTitleText" : "getDrawableContext",
         "enablePullDownRefresh" : false
       }
+    },
+    {
+      "path" : "pages/component/transition-event/transition-event",
+      "style" : 
+      {
+        "navigationBarTitleText" : "",
+        "enablePullDownRefresh" : false
+      }
     }
 
   ],
diff --git a/pages/component/transition-event/transition-event.test.js b/pages/component/transition-event/transition-event.test.js
new file mode 100644
index 00000000..def2ec25
--- /dev/null
+++ b/pages/component/transition-event/transition-event.test.js
@@ -0,0 +1,16 @@
+// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
+
+describe('transition event', () => {
+
+    let page;
+    beforeAll(async () => {
+        page = await program.reLaunch('/pages/component/transition-event/transition-event')
+        await page.waitFor(3000);
+    });
+
+    it('transitionend', async () => {
+        await page.callMethod('switchBtn')
+        await page.waitFor(3000)
+        expect(await page.data("onTransitionEndTriggr")).toBe(true)
+    });
+});
diff --git a/pages/component/transition-event/transition-event.uvue b/pages/component/transition-event/transition-event.uvue
new file mode 100644
index 00000000..3c0355db
--- /dev/null
+++ b/pages/component/transition-event/transition-event.uvue
@@ -0,0 +1,64 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+  <!-- #endif -->
+    <button @click="switchBtn">{{buttonValue}}</button>
+    <image class="transition-transform" id="transition-transform" @transitionend="onEnd" src="/static/uni.png"></image>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        times: 0,
+        element: null as Element | null,
+        isStart: false,
+        buttonValue: "开启图片旋转",
+        onTransitionEndTriggr: false
+      }
+    },
+    methods: {
+      switchBtn() {
+        if (!this.isStart) {
+          if (this.element == null) {
+            this.element = uni.getElementById('transition-transform')
+          }
+          this.buttonValue = "关闭图片旋转"
+          this.times = this.times + 1
+          this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)')
+          this.element!.style.setProperty('transition-duration', '2000')
+          this.isStart = true
+        } else {
+          this.isStart = false
+          this.times = 0
+          this.buttonValue = "开启图片旋转"
+          this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)')
+          this.element!.style.setProperty('transition-duration', '0')
+        }
+      },
+      onEnd() {
+        if (this.isStart) {
+          this.times = this.times + 1
+          this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)')
+          this.onTransitionEndTriggr = true
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .transition-transform {
+    width: 400rpx;
+    height: 400rpx;
+    margin: 50rpx auto;
+    border-radius: 200rpx;
+    transition-duration: 2000;
+    transition-property: transform;
+    transition-timing-function: linear;
+    transform: rotate(0deg);
+  }
+</style>
diff --git a/pages/pages.test.js b/pages/pages.test.js
index c4f6e04a..0af0840b 100755
--- a/pages/pages.test.js
+++ b/pages/pages.test.js
@@ -37,6 +37,7 @@ const pages = [
   '/pages/component/view/view',
   // '/pages/component/web-view/web-view', // 动态内容
   '/pages/component/web-view-local/web-view-local',
+  '/pages/component/transition-event/transition-event',
   
   // CSS
   '/pages/CSS/background/background-color',
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index 61b313dc..bb99f3a3 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -254,6 +254,10 @@ export default {
              name: '通用事件',
              url: '/pages/component/general-event/general-event',
              enable: true,
+           },{
+             name: 'Transition事件',
+             url: '/pages/component/transition-event/transition-event',
+             enable: true,
            },
          ] as Page[],
        }
-- 
GitLab