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

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

转载作者：行者123 更新时间：2023-12-01 04:58:37

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

最佳答案

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

我找到了解决此问题的方法。将 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;
}

关于cordova - 角 Material 和 Cordova : poor animation performance on android，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34932715/

文章推荐： command-line - Wix 从 .tar.gz 运行命令行提取

文章推荐： Python找不到写入输出的文件路径

performance - "performant"软件究竟是什么意思？
关闭。这个问题是opinion-based .它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 8年前关闭。 Improve t
performance - 灿灿授权: Performance Issue
暂时忘记能力的定义，只关注能力的“检查”(使用“授权!”)，我看到 CanCan 添加了大约 400 毫秒，用于简单地检查用户是否具有特定的能力主题/模型。这是预期的吗(我假设不是)？或者，有没有可
performance - Swift 显式与推断类型 : Performance
我正在阅读有关 Swift 的教程 ( http://www.raywenderlich.com/74438/swift-tutorial-a-quick-start )，它预定义为不显式设置类型，因
performance - 编码优先级 : Performance, 可维护性、可重用性？
这主要是由于对 SQL 问题的回答。由于性能原因，有意省略了 UDF 和子查询。我没有包括可靠性并不是说它应该被视为理所当然，但代码必须工作。性能永远是第一位的吗？提供了许多以性能为主要优先事项的答
performance - Scala递归与循环: performance and runtime considerations
我已经编写了一个简单的测试平台来测量三种阶乘实现的性能:基于循环的，非尾递归的和尾递归的。 Surprisingly to me the worst performant was the loop o
performance - ui-performance 插件无法在开发模式下工作 (Grails)
我已将 ui-performance 插件应用到我的应用程序中。不幸的是，在开发模式下运行应用程序时它似乎不起作用。例如，我的 javascript 导入是用“vnull”版本呈现的。例如不会
performance - 编译 F# 引用 : performance?
我有一个我操作的 F# 引用(我在各处添加对象池以回收经常创建和删除的短期对象)。我想运行结果报价；现在我使用了 F# PowerPack，它提供了将引用转换为表达式树和委托(delegate)的方法
performance - Spark独立: SparklyR : Performance issues
我正在尝试在 Spark 服务器上运行 SparklyR 库中的机器学习算法。 1 个簇 8 核 24G内存 Ubuntu 16.04 星火2.2 独立配置 1名师傅/2名 worker 每个执行器的
performance - 架构和索引以及主键 : Differences in lookup performance?
我有一个数据库(准确地说是在 postgres 上运行)，具有以下结构: user1 (schema) | - cars (table) - airplanes (table, again) .
performance - iOS/核心动画 : Performance tuning
我的应用程序在我的 iPad 上运行。但它的表现非常糟糕——我的速度低于 15fps。谁能帮我优化一下？它基本上是一个轮子(派生自 UIView)，包含 12 个按钮(派生自 UIControl)。
performance - coursera progfun1 : scala union performance
在完成“Scala 中的函数式编程原则”@coursera 类(class)第 3 周的作业时，我发现当我实现视频类(class)中所示的函数联合时: override def union(tha
performance - Symfony2 依赖注入(inject) : performances impact
我正在重构我的一个 Controller 以使其成为一项服务，我想知道不将整个服务容器注入(inject)我的 Controller 是否会对性能产生影响。这样效率更高吗: innova.path.
performance - facelet tag performance
我有一个要显示的内容很大的文件。例如在显示用户配置文件时，中的每个 EL 表达式需要一个 userId 作为 bean 的参数，该参数取自 session 上下文。我在 xhtml 文件中将这个 u
performance - OpenGL/DirectX : How does Mipmapping improve performance?
我非常了解 mipmapping。我不明白(在硬件/驱动程序级别)是 mipmapping 如何提高应用程序的性能(至少这是经常声称的)。在执行片段着色器之前，驱动程序不知道要访问哪个 mipmap
performance - Scala 惰性值 : performance penalty? 线程安全？
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: What's the (hidden) cost of lazy val? (Scala) Scala 允许定义惰
java - build().perform() 和 Perform() 之间有什么区别
一些文章建议现在 build() 包含在 perform() 本身中，而其他人则建议当要链接多个操作时使用 build().perform()一起。最佳答案 build() 包含在 perform(
performance - postgres 函数 : when does IMMUTABLE hurt performance?
Postgres docs说 For best optimization results, you should label your functions with the strictest vol
performance - 零成本抽象 : performance of for-loop vs. 迭代器
阅读Zero-cost abstractions看着 Introduction to rust: a low-level language with high-level abstractions我尝
performance - MQ : CPU Performance 上的 SSL
我想在 MQ 服务器上部署 SSL，但我想知道我当前的 CPU 容量是否支持 SSL。 (我没有预算增加 CPU 内核和 MQ PVU 的数量) 我的规范: Windows 2003 服务器 SP2，
performance - Chrome Performance Profiler 中的“Timings”选项卡丢失
因此，我在 Chrome 开发者工具的性能选项卡内的时间部分成功地监控了我的 React Native 应用程序的性能。突然在应用程序的特定重新加载时，Timings 标签丢失。我已尝试重置

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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