css - CSS3 过渡性能的注意事项-6ren

css - CSS3 过渡性能的注意事项

转载作者：技术小花猫更新时间：2023-10-29 10:35:06

25

4

作为需要支持移动设备的元素的一部分，我一直致力于使用 CSS3 模仿 iPhone 切换控件。我几乎已经了解了该元素的外观，并且正在使用 CSS3 过渡来为其状态变化设置动画。

当我将元素本身放在页面上而没有其他元素时，iOS 上的过渡相对平滑。但是，当我将它与页面上的其他 CSS 元素结合使用时，iOS 中的结果会很慢。它比原始 jQuery 动画稍微好一点，但也好不了多少。

我设置了两个测试页面来演示我的意思(在常规浏览器中几乎看不出区别):

自行切换控件> http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

结合其他元素> http://ben-major.co.uk/labs/iPhone%20UI/

我正在寻找有关加速移动设备过渡的任何建议。哪些因素可能会降低其在整页测试中的性能？

欢迎任何建议和评论。

最佳答案

你必须小心这个，因为它可以改变它所应用的元素的 z-index，但是添加:

-webkit-transform-style: preserve-3d;

对于您应用过渡的元素，可以显着加快动画速度，因为它强制硬件为动画使用硬件加速。

如果确实遇到布局错误，您可以将 2d 过渡切换为 3d 值，因此:

-webkit-transform: translate(100px, 100px)

变成:

-webkit-transform: translate3d(100px, 100px, 0px)

您可以在 http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/# 查看这如何帮助加快速度的演示。

如果将此应用于元素后，您看到它或它周围的元素在使用时闪烁，则使用:

-webkit-backface-visibility: hidden;

到元素，这应该可以解决问题。

这些技巧帮助我制作了快速、高效的 CSS 过渡，希望它们有所帮助。 :)

关于css - CSS3 过渡性能的注意事项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7908493/

25

4

0

文章推荐： css - 流体输入元件

文章推荐： ios - iTunes 上的 iPhone 应用程序名称

文章推荐： xcode - 将自定义按钮添加到无边框的导航 Controller

文章推荐： css - 文本在 css 列表中环绕在元素符号下

php - 使用PHP的“注意: undefined variable ”，“注意: undefined index ”和“注意: undefined offset ”
我正在运行PHP脚本，并继续收到如下错误：注意：未定义的变量：第10行的C：\ wamp \ www \ mypath \ index.php中的my_variable_name 注意
php - 使用PHP的“注意: undefined variable ”，“注意: undefined index ”和“注意: undefined offset ”
我正在运行PHP脚本，并继续收到如下错误：注意：未定义的变量：第10行的C：\ wamp \ www \ mypath \ index.php中的my_variable_name 注意
php - 使用PHP的“注意: undefined variable ”，“注意: undefined index ”和“注意: undefined offset ”
我正在运行PHP脚本，并继续收到如下错误：注意：未定义的变量：第10行的C：\ wamp \ www \ mypath \ index.php中的my_variable_name 注意
"Notice: Undefined variable", "Notice: Undefined index", "Warning: Undefined array key", and "Notice: Undefined offset" using PHP(注意：未定义变量“、”注意：未定义索引“、”警告：未定义数组键“、”注意：未定义偏移量“)
我正在运行一个PHP脚本，并且继续收到如下错误：。第10行和第11行如下所示：。这些错误消息的含义是什么？。为什么他们突然出现了？我多年来一直使用这个脚本，从来没有遇到过任何问题。。我该怎么修理它们呢
android - 注意 : Recompile with -Xlint:deprecation. 注意:一些输入文件使用或覆盖已弃用的 API
当我在 flutter clean 之后运行 flutter run 或 debug my code 时显示此错误 Note: C:\src\flutter.pub-cache\hosted\pub.
java - 注意 : MainActivity uses or overrides a deprecated API. 注意:使用 -Xlint:deprecation 重新编译以获取详细信息
My Goal: To fix this error and be able to run my app without an error. Error Message: Note:D:\Learni
注意！JAVA中的值传递
前言：今天在解决一个问题时，程序总是不能输出正确值，分析逻辑思路没问题后，发现原来是由于函数传递导致了这个情况。 LeetCode 113 问题：给你二叉树的根节点
r - 检查描述元信息...注意
我正在 R 中开发一个包，当我运行时 devtools::check()我收到以下说明。 checking DESCRIPTION meta-information ... NOTE Malforme
php - 注意:使用未定义的常量GLOB_BRACE
获得通知和警告波纹管 Notice: Use of undefined constant GLOB_BRACE - assumed 'GLOB_BRACE' in /var/www/html/open
r - 对不同包的外部函数调用注意
我正在准备一个 R 包以提交给 CRAN。 R CMD 检查给了我以下注意: Foreign function calls to a different package: .Fortran("cinc
php - 注意:尝试获取非对象错误的属性
我正在尝试从以下位置获取数据: http://api.convoytrucking.net/api.php?api_key=public&show=player&player_name=Mick_Gi
php - 注意:未定义索引product_name
我有这段代码，但我不明白为什么我仍然有这个错误，我已经尝试了所有解决方案，但无法解决这个问题:-注意:未定义索引:product_price-注意:未定义索引:product_quantity-注意:
php - 注意:php中的未定义索引
This question already has answers here: “Notice: Undefined variable”, “Notice: Undefined index”, and
php - 注意:尝试获取非对象错误的属性
我正在尝试从以下位置获取数据: http://api.convoytrucking.net/api.php?api_key=public&show=player&player_name=Mick_Gi
注意!PHP 7中不要做的10件事
切记，在PHP 7中不要做的10件事 1. 不要使用 mysql_ 函数这一天终于来了，从此你不仅仅“不应该”使用mysql_函数。PHP 7 已经把它们从核心中全部移除了，也就是说你需要迁移
注意:php5.4删除了session_unregister函数
前几天安装了dedecms系统，当在后台安全退出的时候，后台出现空白，先前只分析其他功能去了，也没太注意安全，看了一下安全退出的代码，是这样写的：复制代码代码如下: function ex
php - 注意 php - 替代还是删除？
我使用此代码来检查变量$n0、$n1、$n2是否未定义。但每次未定义时我都会收到通知。我的代码是一种不好的做法吗？还有什么替代方案吗？或者只是删除通知，代码就可以了？ if
php - 修复所有警告，注意，错误是否重要？
编写代码时处理所有警告是否重要？在我公司中具有较高资历的开发人员坚持认为警告是无害的。诚然，其中一些是: Warning: Division by zero Notice: Undefined ind
php - 注意:未定义索引:点击
我有一个搜索查询，执行搜索查询后，我将$ result放入数组中。我的PHP代码- $contents = $client->search($params); // executing the se
php - PHP:注意:未定义索引
This question already has answers here: “Notice: Undefined variable”, “Notice: Undefined index”, and

首页

博学

6Ren·AI

商城

css - CSS3 过渡性能的注意事项