CSS3关键帧即使使用供应商前缀也不起作用

问题描述

我有一个侧面导航栏，对于手机，我需要使用切换按钮在x轴上移动它，这是我的代码

这是scss代码：

mat-sidenav{
  background-color: var(--primary-color);
  width:230px;
  height:100%;
  position: fixed;
  display: flex;
  flex-direction: column;
}

.hide{
  -webkit-animation: mymove 0.15s;
  animation: mymove 0.15s;
}

@-webkit-keyframes mymove {
  0%  { -webkit-transform: translateX(-230px) !important;
          -ms-transform: translateX(-230px) !important;
          transform: translateX(-230px) !important;}
  100%  { -webkit-transform: translateX(0px) !important;
        -ms-transform: translateX(0px) !important;
        transform: translateX(0px) !important;}
}
@keyframes mymove {
  0% {  -webkit-transform: translateX(-230px) !important;
          -ms-transform: translateX(-230px) !important;
          transform: translateX(-230px) !important;}
  100% {  -webkit-transform: translateX(0px) !important;
        -ms-transform: translateX(0px) !important;
        transform: translateX(0px) !important;}
}

这是JavaScript代码：

this.sideNav = document.querySelector('.side-nav-mobile');

this.sideNav.classList.toggle('hide');

这是HTML代码

<mat-sidenav-container>
  <mat-sidenav class="side-nav-mobile hide" mode="side" opened>

    // A lot of content here

  </mat-sidenav>
  <mat-sidenav-content></mat-sidenav-content>
</mat-sidenav-container>

注意：我之前使用过过渡，但是即使在添加前缀之后，它也无法在IOS上使用，所以我必须使用关键帧，但是它们在任何地方都无法工作，我的代码有什么问题？

另一个注意事项：我试图在其他元素上使用这些关键帧，但这也行不通。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-animations css-transitions