我的动画有问题。我在一个容器中有两个图像，个图像的z-index:1，第二个图像的z-index:2。在标签中添加的个图像（img src...）并且宽度为，第二个图像作为背景-image：URL。宽度：50%。当我将光标悬停在容器上时，我的第二个图像会改变与个图像重叠的宽度。 更改宽度时，此过程将大大减慢(https://www.loom.com/share/22975244e3254f75b83026551df55918) 我怎样才能使动画像这样，但顺利？ 主代码:

      if (this.$refs.beforeImage && this.$refs.trackContainer && this.$refs.trackLine && this.$refs.afterImage) {
        const cursorPositionX = event.pageX || (event.targetTouches && event.targetTouches[0].pageX)
        event.preventDefault()
        event.stopPropagation()
        this.$refs.beforeImage.style.transition = null

        const trackContainerRect = this.$refs.trackContainer.getBoundingClientRect()
        const afterImageRect = this.$refs.afterImage.getBoundingClientRect()

        this.beforeImageWidth = ((cursorPositionX - afterImageRect.left) / this.$refs.afterImage.offsetWidth) * 100

        this.$refs.beforeImage.style.width = `${this.beforeImageWidth}%`
        if (this.beforeImageWidth > 100) this.$refs.beforeImage.style.width = ''
        if (this.beforeImageWidth < 0) this.$refs.beforeImage.style.width = '0%'
      }
    }```

顺晟科技：