如何解决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 举报,一经查实,本站将立刻删除。