由于移动设备（即平板电脑和手机）的性能问题，我不得不退出使用jQuery fadeIn()和fadeOut()
因此，我重写了我的代码以单独使用css过渡进行淡入淡出。
这样就解决了性能问题。这意味着动画现在不仅可以在桌面上流畅播放，还可以在移动设备上流畅播放。但是这种方法存在一个怪异的问题。只有当移动设备上的浏览器切换到全屏显示时，包含视频的div的视频子项才会停止淡入和淡出。请注意，不是div，而是div的子视频停止衰减并开始跳开和跳开。当我看到其边框和背景缓慢出现/消失时，div本身似乎正确消失了。
退出全屏模式后，一切都会恢复正常，并且可以正常运行。
我实际上找到了一种骇人听闻的解决方案，可以在全屏模式下实现相同的褪色效果。
在将css转换设置为opacity:0;时，再次使用opacity:1;和transition: opacity 1s;，我要做的是淡入另一个带有纯黑色背景的div，该div位于包含视频的顶部， div使用position: absolute或position: fixed。现在看起来就像视频正在消失，尽管它只是另一个div覆盖了视频区域。