cordova - 角 Material 和 Cordova : poor animation performance on android

Question

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

Answer 1

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

我找到了解决此问题的方法。将 css 硬件加速添加到特定类别的 angular-material 指令中，您的动画效果不佳可以解决该问题。

以下是在 Moto E、Moto G、一加 1 和一加 2 安卓手机上进行的测试，其侧导航动画效果不佳且运行流畅。

将以下代码添加到您的自定义 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, 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;
}