angular-material和cordova : android上的动画性能很差

Question

有什么建议可以让cordova + angular-material应用程序在android上运行动画更快更流畅吗？即使是在最新版本的angular-material上，animate在android设备上也太糟糕了。

Answer 1

我在几个月后发布了这个答案，因为我看到很多人仍然面临这个问题。

我找到了解决这个问题的办法。将css硬件加速添加到特定类别的角度材质指令中，可以解决这个问题。

下面是在Moto E，Moto G，一加1和一加2的android手机上进行的测试，以获得较差的sidenav动画效果，工作流畅。

将以下代码添加到您的自定义css文件中，并将其链接到angular-material.css .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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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, 0)!important;
  -ms-transform: translate3d(-100%, 0, 0)!important;
  -o-transform: translate3d(-100%, 0, 0)!important;
  -webkit-transform: translate3d(-100%, 0, 0)!important;
  transform: translate3d(-100%, 0, 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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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.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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 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, 0)!important;
  -ms-transform: translate3d(-100%, 0, 0)!important;
  -o-transform: translate3d(-100%, 0, 0)!important;
  -webkit-transform: translate3d(-100%, 0, 0)!important;
  transform: translate3d(-100%, 0, 0)!important;
}