угловой материал и кордова: плохая производительность анимации на андроиде

Question

Любые предложения, чтобы сделать анимацию кордоны + углового материала более быстрой и плавной на Android-устройстве? Даже при последней сборке углового материала анимация слишком плоха на устройствах Android.

Answer 1

Я отправляю этот ответ после нескольких месяцев, потому что вижу, что многие люди по-прежнему сталкиваются с этой проблемой.

Я нашел работу вокруг этой проблемы. Добавление аппаратного ускорения css к определенному классу директив углового материала, где вы получаете плохую анимацию, решает проблему.

После тестирования на Moto E, Moto G, One plus 1 и One plus 2 телефонов Android для плохой анимации sidenav и работает плавно.

Добавить следующий код в пользовательском файле CSS и связать его после углового-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; 
}