Vue 等到外部请求完成

Question

我的 Vue 应用程序中有一个页面，该页面在路径输入时执行动画。然而，因为我在这个页面中嵌入了一个 Vimeo 视频，所以在动画过程中帧从 60 帧下降到 20 帧。我认为这是因为必须向 Vimeo 服务器发出请求，并且在动画开始时尚未完成。

我想在第一次加载网站时预加载嵌入的 Vimeo 视频，或者以某种方式等待请求完成，然后开始播放动画。我该怎么做？

视频在父组件中是这样嵌入的，动画在projecttop子组件中：

<div>
  <projecttop></projecttop>
  <div class="vimeo-container">
    <iframe src="https://player.vimeo.com/video/397648215" frameborder="0" allow="fullscreen"allowfullscreen></iframe>
   </div>
</div>

export default {
  name: 'parentcomponent',
  components: {
    projecttop
  }
}

这是带有动画的子组件：

<script>

import { gsap } from "gsap";

export default {
  name: "projecttop",
  methods: {
    slideIn() {
      var tl = gsap.timeline()
      tl.from('#project-title', {
        delay: 0.5,
        duration: 0.8,
        y: 100,
        opacity: 0,
        ease: "circ.out",
      })
    }
  },
  mounted () {
    if(document.readyState === "complete") {
      this.slideIn()
    }
  }
};
</script>

Answer 1

你可以在你的父组件中尝试这样的事情：

<projecttop :start-animation="videoLoaded"></projecttop>
<div class="vimeo-container">
  <iframe
    src="https://player.vimeo.com/video/397648215"
    frameborder="0"
    allow="fullscreen"
    allowfullscreen
    @load="videoLoaded = true
  >
  </iframe>
</div>

...
data() {
  return {
    videoLoaded: false,
  }
},

然后，在您的子组件中，传入videoLoaded 的值，并添加一个观察者来监控它何时更新为true：

props: {
  startAnimation: {
    type: Boolean,
    required: true
  }
},
watch: {
  startAnimation(val) {
    if (val) this.slideIn();
  }
}