Vue CSS淡入/淡出视频过渡

Posted 2023-02-22

【中文标题】Vue CSS淡入/淡出视频过渡

【英文标题】：Vue CSS fade in/out transitions on videos

【发布时间】：2021-10-01 06:32:17

【问题描述】：

在我的项目中，我有 4 组视频同时渲染，但一次只显示一个。用户可以通过点击箭头键转换到下一个/上一个视频。每当用户按下一个键转到下一个/上一个视频时，我希望在这些视频上进行淡入/淡出过渡。

我尝试过使用 vue 过渡，但他们不知道如何将它们与 v-show 而不是 v-if 一起使用，棘手的部分是所有视频只渲染一次并且永远不会被删除，它们只会被隐藏。下面是这些视频的 html 代码。

<div class="video-container" v-show="currentVideo === 1">
      <video @ended="countLoop" ref="video1" muted autoplay>
        <source src="../assets/videos/video1.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="video-container" v-show="currentVideo === 2">
      <video @ended="countLoop" ref="video2" muted>
        <source src="../assets/videos/video2.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="video-container" v-show="currentVideo === 3">
      <video @ended="countLoop" ref="video3" muted>
        <source src="../assets/videos/video3.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="video-container" v-show="currentVideo === 4">
      <video @ended="countLoop" ref="video4" muted>
        <source src="../assets/videos/video4.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>

【参考方案1】：

是的，v-show 只会影响 css “show” 属性，如果条件不满足，组件会被隐藏并且永远不会从 dom 中删除。但是 v-if 是不同的，因为它会将组件从 dom 树中删除。

https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show

不同的是，带有 v-show 的元素将始终被渲染并保留在 DOM 中； v-show 只切换元素的显示 CSS 属性。

v-if 是“真正的”条件渲染，因为它确保条件块内的事件侦听器和子组件在切换期间被正确销毁和重新创建。

v-if 也是惰性的：如果在初始渲染时条件为假，它不会做任何事情 - 直到条件第一次变为真时才会渲染条件块。

相比之下，v-show 更简单 - 无论初始条件如何，元素总是会呈现，并使用基于 CSS 的切换。

一般来说，v-if 的切换成本较高，而 v-show 的初始渲染成本较高。因此，如果您需要经常切换某些东西，则更喜欢 v-show，如果条件不太可能在运行时改变，则更喜欢 v-if

如果您是 vue 新手并希望使过渡更轻松、更自然，您可以尝试一些 vue 框架，例如 vuetify。 https://vuetifyjs.com/en/styles/transitions/