[Taro][Vue][小程序] animation 动画没效果

Question

如下bell()执行后没动画效果

<script lang="ts" setup>
import {computed, reactive, watch} from "vue"
import Taro from "@tarojs/taro"

const props = defineProps({
  count: {
    type: Number,
    default: -1,
  },
  width: {
    type: Number,
    default: 39,
  },
  height: {
    type: Number,
    default: 42,
  },
})

watch(
  () => props.count,
  value => {
    if (value == 3) {
      bell()
    }
  },
)

const state = reactive({
  isShow: computed(() => {
    return props.count >= 0
  }),
  animationData: {}
})

const animation = Taro.createAnimation({
  transformOrigin: "50% 50%",
  duration: 3000,
  timingFunction: "linear",
  delay: 0
})

function bell() {
  animation
    .rotateX(35).rotateX(-30).rotateX(25).rotateX(-20).rotateX(15).rotateX(-10).rotateX(5).rotateX(0)
    .step({ duration: 3000, timingFunction: 'linear' })
  state.animationData = animation.export()
}
</script>

<template>
  <text v-if="state.isShow" :animate="state.animationData" class="clock-bg" :style="{ width: `${width}px`, height: `${height}px` }">{{ count }}</text>
</template>

<style lang="scss">
.clock-bg {
  display:flex;
  align-items:center;
  justify-content:center;
  color: #ff8800;
  background: url('../asset/ic_clock.png') no-repeat;
  background-size: contain;
}
</style>