EveryLike/pages/component/global-events/transition-events.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1;" v-if="isShow">
  <!-- #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,
        isShow: false
      }
    },
    onReady() {
      // onReady中动态修改isShow是为了验证在安卓手机上子线程中创建节点可能会崩溃的问题，不具备代码参考性。
      // #ifdef APP-ANDROID
      var that = this
      class ThreadRunnable extends Runnable {
        override run() {
          that.isShow = true
        }
      }
      new Thread(new ThreadRunnable()).start()
      // #endif
      // #ifndef APP-ANDROID
      this.isShow = true
      // #endif
    },
    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('transition-duration', '2000ms')
          this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)')
          this.isStart = true
        } else {
          this.isStart = false
          this.times = 0
          this.onTransitionEndTriggr = false
          this.buttonValue = "开启图片旋转"
          this.element!.style.setProperty('transition-duration', '0ms')
          this.element!.style.setProperty('transform', 'rotate(0deg)')
        }
      },
      onEnd() {
        console.log('transform transitionend')
        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-property: transform;
    transition-timing-function: linear;
    transform: rotate(0deg);
  }
</style>