All geek questions in one place

Angular material and cordova: low animation performance on Android

Any suggestions to make the cord + angular material app run animations faster and smoother on Android? Even with the latest layout of angular material, the animation is too bad on Android devices.

+4
source share
1 answer

I am posting this answer in a few months because I see that many people still face this problem.

I found a job for this problem. Adding CSS hardware acceleration to a specific class of angular-material directives, where you get poor animation, solves the problem.

- Moto E, Moto G, One plus 1 One 2 Android .

css angular -material.css

enter image description here

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;
}
0

Source: https://habr.com/ru/post/1625397/

More articles:


All Articles