【问题标题】：css transition not working in mobile chromecss 过渡在移动 chrome 中不起作用
【发布时间】：2018-08-29 06:46:24
【问题描述】：

我正在尝试在单击某些文本时使用 css 转换来缩放图像。

每次单击链接时，复选标记图像都应以动画形式显示出来。然而，在 iPhone Chrome 中，复选标记没有动画 - 只是从一种状态跳转到另一种状态，似乎忽略了 css {transition: transform 200ms}。

它似乎在除 iPhone Chrome 浏览器之外的所有地方都可以工作 - 我已经尽我所能地完成了所有事情，但它完全让我难过！

Codepen 链接：https://codepen.io/anon/pen/oqBJzr

CSS：

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

JavaScript：

function checkMarkAnim() {

    $('.checkmark').toggleClass('scale');

}

任何关于哪里出了问题的指针都会有帮助。

提前谢谢你

更新：

添加-webkit-transition: -webkit-transform 200ms; 的建议似乎并没有解决问题（虽然我最初认为它已经解决了）。

【问题讨论】：

你试过-webkit-transition: -webkit-transform 200ms;吗？
是的，应该可以。由于 Apple 的限制，Chrome 在 iOS 上使用较旧的 webkit（与 Safari 相同），并且仅支持供应商前缀转换。 stackoverflow.com/questions/30128587/…
谢谢@adpro！是的，这似乎确实有效！我试过：-webkit-transition: transform 200ms;我没有意识到它需要 -webkit-transform
我也遇到了这个问题，好像是今年早些时候，你有没有找到解决办法？
@HMS 有什么更新吗？

标签： css-transitions css-transforms

【解决方案1】：

经过几天的搜索，真正对我有用的是只需重新启动 Chrome。

【讨论】：

有趣的是，它对我也很有效。无论如何，我的 css 转换过渡都没有做任何动画，而只是在 Chrome for iOS 中。出于绝望，我什至尝试使用旧的 -webkit 规则和值，但没有帮助。但后来我强迫它重新开始，它又起作用了。
确实，这里也一样。好笑……
我不相信它会起作用，但是......它起作用了
我花了大约 15 分钟尝试调试我的 CSS，结果发现这是 iOS 上的 Chrome 问题。强制杀死并重新启动 Chrome 就可以了。谢谢！
对于任何持怀疑态度的人，不要忽视这个答案——它有效。

【解决方案2】：

也请添加/保留-webkit-transition: transform 200ms;。所以最后你应该有：

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    -webkit-transition: -webkit-transform 200ms
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

在此处使用移动 chrome (iOS) 查看它：https://codepen.io/miikaeru/pen/aMXYEb

【讨论】：