添加transition事件示例

pages.json

@@ -1001,6 +1001,14 @@
         "navigationBarTitleText" : "getDrawableContext",
         "enablePullDownRefresh" : false
       }
+    },
+    {
+      "path" : "pages/component/transition-event/transition-event",
+      "style" : 
+      {
+        "navigationBarTitleText" : "",
+        "enablePullDownRefresh" : false
+      }
     }
 
   ],

pages/component/transition-event/transition-event.test.js

+// 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)
+    });
+});

pages/component/transition-event/transition-event.uvue

+<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>

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',

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[],
        }