为什么移动端微信浏览器在手机后台运行的时候，transition 动画会暂停呢？

比如：我在进入一个页面后，我切换成后台运行，延迟3秒执行transition动画。在10秒后，再从后台运行切换回来，此时看到的画面是transition动画刚刚开始播放。

视频：https://pan.baidu.com/s/19EYvHS569h5aQLhBzIhiiQ?pwd=7rju

<script setup>
  const wrapperRef = ref(null);
  const IsAnimation = ref(false)

  onMounted(() => {
    // document.addEventListener('visibilitychange', function () {
    //     // 用户离开了当前页面
    //     if (document.visibilityState === 'hidden') {
    //         // console.log("页面不可见，隐藏了");
    //         IsAnimation.value = true;
    //     }
        
    //     // 用户打开或回到页面
    //     if (document.visibilityState === 'visible') {
    //         // console.log("页面可见");
    //     }
    // });

    wrapperRef.value.addEventListener("transitionend", transitionEnd, false)

    function transitionEnd(){
      console.timeEnd("动画时间");
      console.log("动画结束");
    }

    setTimeout(() => {
      console.time("动画时间");
      IsAnimation.value = true;
    }, 3000)


  })

</script>

<template>
  <div class="wapper" ref="wrapperRef"
    :style="`
      ${ IsAnimation ? `
          width: 300px;
          height: 300px;
      ` : `
          width: 0px;
          height: 0px;
      ` }
    `"
  >
    
  </div>
</template>

<style lang="scss" scoped>
  .wapper {
    background-color: red;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}
</style>