Javascript 如何检测mobile Safari全局方向旋转动画

嗨，我正试图在mobile Safari旋转到不同方向时触发一个事件。我知道

orientationchange

但这是不可接受的，因为在播放方向旋转动画并设置新方向后，它被称为。我有一个元素需要在动画之前或期间隐藏

---

我试图捕捉方向改变之前的状态，尤其是在动画播放之前。我已经尝试将类似于

webkitAnimationStart

和

animationstart

的事件应用到

窗口

、

文档

和

文档主体

中，但它们似乎都没有被触发。希望我忽略了一些东西。

据我所见，几乎每款手机浏览器都存在这一问题，没有简单的解决方案

Chrome团队在设备方向更改解锁屏幕下发布了一项半官方建议，即使用

deviceorientation

模拟浏览器内部的操作，以确定设备的方向：

var previousDeviceOrientation, currentDeviceOrientation;
  window.addEventListener('deviceorientation', function onDeviceOrientationChange(event) {
    // event.beta represents a front to back motion of the device and
    // event.gamma a left to right motion.
    if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
      previousDeviceOrientation = currentDeviceOrientation;
      currentDeviceOrientation = 'landscape';
      return;
    }
    if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
      previousDeviceOrientation = currentDeviceOrientation;
      // When device is rotated back to portrait, let's unlock screen orientation.
      if (previousDeviceOrientation == 'landscape') {
        screen.orientation.unlock();
        window.removeEventListener('deviceorientation', onDeviceOrientationChange);
      }
    }
  });

var-previousDeviceOrientation、currentDeviceOrientation；
window.addEventListener（'deviceorientation'，函数onDeviceOrientationChange（事件）{
//event.beta表示设备的前后运动
//event.gamma从左向右运动。
if（Math.abs（event.gamma）>10 | | Math.abs（event.beta）<10）{
previousDeviceOrientation=当前DeviceOrientation；
currentDeviceOrientation=‘横向’；
返回；
}
if（Math.abs（event.gamma）<10 | | Math.abs（event.beta）>10）{
previousDeviceOrientation=当前DeviceOrientation；
//当设备旋转回纵向时，让我们解锁屏幕方向。
如果（以前的DeviceOrientation==“横向”）{
screen.orientation.unlock（）；
window.removeEventListener（'deviceorientation'，onDeviceOrientationChange）；
}
}
});

Chrome团队使用此代码的特定用例是在使用

screen.orientation.lock

（禁用方向更改事件）后获取设备的方向

这可以概括为方向更改事件的替代品，在动画开始之前为您提供一点时间优势

棘手的部分是计算出浏览器决定切换方向的直角范围（当浏览器实际上不切换方向时，您不想启动动画）

解决这一问题的一种方法是使用

screen.orientation.lock

完全控制方向更改，基本上就是设置阈值并相应地锁定方向

---

然而，由于世界并不完美，

screen.orientation.lock

只能在全屏模式下或在独立的web应用程序中工作。。。如果你想让你的应用程序成为全屏体验或独立的web应用程序，那么你很幸运。

我正在寻找解决这个问题的方法，你找到了吗？@WassimGr我没有找到。我找到了一个部分解决方案，我将在这里发布