任何建议使cordova角度材料应用程序在
Android上运行动画更快,更顺畅？即使在角度材料的最新版本上,动画在Android设备上也太糟糕了.
解决方法
几个月后我发布了这个答案因为我看到很多人还在面对这个问题.
我找到了解决这个问题的方法.将css硬件加速添加到特定类的角度材质指令,在这些指令中,动画效果不佳可以解决问题.
以下是对Moto E,Moto G,One plus 1和One plus 2 Android手机进行测试,以获得不良的侧面动画,并且工作顺畅.
将以下代码添加到自定义css文件中,并在angular-material.css之后链接它
md-sidenav.md-closed-add,md-sidenav.md-closed-remove {
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0) !important;
-ms-transform: translate3d(0,0) !important;
-o-transform: translate3d(0,0) !important;
-webkit-transform: translate3d(0,0) !important;
transform: translate3d(0,0) !important;
transition: 0.2s ease-in all !important; }
md-sidenav.md-closed-add.md-closed-add-active,md-sidenav.md-closed-remove.md-closed-remove-active {
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0) !important;
transition: all 0.2s cubic-bezier(0.25,0.8,0.25,1) !important;
}
.md-sidenav-left,md-sidenav {
left: 0;
top: 0;
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0) !important;
}
.md-sidenav-left.md-closed,md-sidenav.md-closed {
-moz-transform: translateX(-100%)!important;
-ms-transform: translateX(-100%)!important;
-o-transform: translateX(-100%)!important;
-webkit-transform: translateX(-100%)!important;
transform: translateX(-100%)!important;
-moz-transform: translateZ(0) translateX(-100%)!important;
-ms-transform: translateZ(0) translateX(-100%)!important;
-o-transform: translateZ(0) translateX(-100%)!important;
-webkit-transform: translateZ(0) translateX(-100%)!important;
transform: translateZ(0) translateX(-100%)!important;
-moz-transform: translate3d(-100%,0)!important;
-ms-transform: translate3d(-100%,0)!important;
-o-transform: translate3d(-100%,0)!important;
-webkit-transform: translate3d(-100%,0)!important;
transform: translate3d(-100%,0)!important;
}
md-sidenav.md-locked-open-add,md-sidenav.md-locked-open-remove {
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0) !important;
}
md-sidenav.md-locked-open,md-sidenav.md-locked-open.md-closed,md-sidenav.md-locked-open.md-closed.md-sidenav-left,md-sidenav.md-locked-open.md-closed.md-sidenav-right,md-sidenav.md-locked-open-remove.md-closed {
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0) !important;
}
md-sidenav.md-closed.md-locked-open-add {
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0) !important;
}
md-sidenav.md-closed.md-locked-open-add-active {
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0) !important;
}
.md-sidenav-backdrop.md-locked-open {
display: none;
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0) !important;
}
.md-sidenav-left,md-sidenav {
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
-moz-transform: translateZ(0) translateX(0) !important;
-ms-transform: translateZ(0) translateX(0) !important;
-o-transform: translateZ(0) translateX(0) !important;
-webkit-transform: translateZ(0) translateX(0) !important;
transform: translateZ(0) translateX(0) !important;
-moz-transform: translate3d(0,0)!important;
}
