transition-event.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1;">
  <!-- #endif -->
    <image class="transition-transform" id="transition-transform" @transitionend="onEnd" src="/static/uni.png"></image>
    <text class="adjust">对图片设置transform进行旋转，在旋转完成的transitionend事件后，继续旋转</text>
    <button class="adjust" @click="switchBtn">{{buttonValue}}</button>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        times: 0,
        element: null as UniElement | 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', '2000ms')
          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', '0ms')
        }
      },
      onEnd() {
        if (this.isStart) {
          this.times = this.times + 1
          this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)')
          this.onTransitionEndTriggr = true
        }
      }
    }
  }
</script>

<style>
.adjust {
  margin: 10px;
}
.transition-transform {
  width: 200px;
  height: 200px;
  margin: 25px auto;
  border-radius: 100px;
  transition-duration: 2000ms;
  transition-property: transform;
  transition-timing-function: linear;
  transform: rotate(0deg);
}
</style>