更新

Question

我正在尝试在点击某些文字时使用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;的建议似乎没有解决问题（虽然我最初认为它有）。

Answer 1

在搜索了几天之后，对我真正起作用的是 Chrome重新启动。

Answer 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

css过渡不适用于移动铬

更新

2 个答案: