CSS 鼠标悬停和触摸动画 (iOS)

Question

基本都有这样的风格

.hover-block {
    -webkit-transition: all 1s linear;
            transition: all 1s linear;      

}

.hover-block:active {
  pointer-events: none;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
}

.hover-block:hover {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
}

我正在寻求支持 evergreen 和 IE10/11，Chrome Android (4.4+)，Mobile Safari (iOS 7+)，它应该'伤害其他触摸事件（滑动滚动）。

它似乎在 Android 和 Chrome 设备模拟上按预期工作，触摸时的非粘性变换是所需的行为。

但不知何故，这个 plunker 在 iOS webkit（iOS 8，所有浏览器）上不起作用，它在触摸时什么也不做。我很确定完全相同的方法（块元素，:active 和 pointer-events: none 加 :hover）在 iOS 8 之前对我有用。如何修复？

看起来像emptytouchstart/touchendJS事件处理程序或者ontouchstart/ontouchend属性can activate touch behaviour on iOS（不能当然可以，但它可能发生在我之前）。它是针对该问题的已知修复程序还是较少的 hacky 修复程序，哪些 iOS 版本受到影响？

Answer 1

所以您运行遇到的问题是："The :active pseudo class matches when an element is being activated by the user"。用户无法激活独立的 <div> 元素，因此不会被 :active 伪 class.

匹配

如果您查看 :active MDN 文章中的 Browser Compatibility，您会看到：

[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.

MDN 有一个可以使用的 list of pseudo classes，您也许可以找到更适合您情况的一个，或者添加一个 touchstart 事件应该可以在 Safari 中使用。

通过将 <div class="hover-block"></div> 元素更改为 <button class="hover-block"></button> 并将 .hover-block:active { 更改为 .hover-block:focus {，我能够让你的 plnkr 工作得非常快。我还添加了 display: block; border: 0; 到 .hover-block。

出于显而易见的原因，您可能不想将 <div> 更改为 <button> 来使效果生效，而是通过使用可以激活的元素，使用不同的伪class，或者在你的目标浏览器中添加允许激活的事件，你应该可以在移动设备上实现你想要的效果。

希望对您有所帮助！

Answer 2

在您的 html 中执行 <body ontouchstart=""> 而不是 <body> 或者在 html5 中，只需 <body ontouchstart>

CSS 鼠标悬停和触摸动画 (iOS)

CSS animation for both mouse hover and touch (iOS)

css

mobile-safari

ios