我遇到的问题是,当动画容器具有更复杂的 HTML 结构时,转换速度真的很慢。为一个空容器设置动画非常流畅,但在向其中添加更多数据后性能真的很糟糕。我知道添加 -webkit-transform: translate3d(0,0,0)
到动画元素的硬件加速,但这似乎对更复杂的 DOM 结构没有帮助。
除了 translate3d
之外,是否有任何资源描述什么会影响 iOS 上 CSS 转换的性能。
最佳答案
你的容器是在屏幕内还是比屏幕大?
我正在制作一个书籍类型的应用程序,其中每个页面都是屏幕大小并且包含复杂的 dom 结构。当我在 dom 中放置更多页面时,页面内的导航和转换性能会变慢。但是从 dom 中移除不在屏幕上的页面,并仅在页面出现或将要出现时渲染它们,从而大大提高了性能。
因此尝试删除用户不可见的元素或使它们display:none
,这可能会提高您的性能。
这里还有非常好的提高性能的资源 http://www.mikedellanoce.com/2012/09/10-tips-for-getting-that-native-ios.html
关于iOS 上的 CSS 过渡性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12235848/