鼠标悬停和触摸的CSS动画（iOS）

这是plnkr的例子。

Basically there is a style like that

基本上有这样的风格

.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);
}

I'm seeking to support evergreen and IE10/11, Chrome for Android (4.4+), Mobile Safari (iOS 7+), and it shouldn't hurt other touch events (swipe scrolling).

我正在寻求支持常青和IE10 / 11,Chrome for Android(4.4+),Mobile Safari(iOS 7+),它不应该伤害其他触摸事件(滑动滚动)。

It seems to work as intended on Android and Chrome device emulation, non-sticky transform on touch is desired behaviour.

它似乎按照预期在Android和Chrome设备上进行模拟,触摸时非粘性变换是理想的行为。

But somehow this plunker doesn't work on iOS webkit (iOS 8, all browsers), it does nothing on touch. I'm quite sure that exactly the same approach (block element, :active with pointer-events: none plus :hover) worked for me in iOS 8 before. How can it be fixed?

但不知何故,这个plunker不能在iOS webkit(iOS 8,所有浏览器)上运行,它在触摸时什么都不做。我很确定完全相同的方法(块元素,:活动与指针事件:无加号:悬停)之前在iOS 8中适用于我。怎么修好?

It looks like empty touchstart/touchend JS event handler or ontouchstart/ontouchend attribute can activate touch behaviour on iOS (can't be sure but it is possible that it happened to me before). Is it a known fix for the problem or there are less hacky ones, which iOS versions are affected?

看起来像空的touchstart / touchend JS事件处理程序或ontouchstart / ontouchend属性可以激活iOS上的触摸行为(不能确定,但它可能发生在我之前)。它是一个已知的问题解决方案,还是有较少的hacky,iOS版本会受到影响?

2 个解决方案

#1

So the issue you're running into is this: "The :active pseudo class matches when an element is being activated by the user". A standalone <div> element cannot be activated by the user and therefore will not be matched by the :active pseudo class.

因此,您遇到的问题是:“:当用户激活元素时,活动伪类匹配”。用户无法激活独立的

元素,因此不会与:active伪类匹配。

If you look under Browser Compatibility in the :active MDN article you'll see that:

如果您查看:活动MDN文章中的浏览器兼容性,您将看到:

[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>.

[1]默认情况下,Safari Mobile不使用:active状态,除非相关元素或上有touchstart事件处理程序。

MDN has a list of pseudo classes that can be used and you might be able to find one that better fits your situation or adding a touchstart event should do the trick in Safari.

MDN有一个可以使用的伪类列表,您可能能够找到一个更适合您的情况,或者在Safari中添加一个touchstart事件。

I was able to get your plnkr working really quick by changing the <div class="hover-block"></div> element to <button class="hover-block"></button> and changing .hover-block:active { to .hover-block:focus {. I also added display: block; border: 0; to .hover-block.

通过将

元素更改为

You, for obvious reasons, may not want to change your <div> to a <button> to get your effect to work, but by using an element that can be activated, using a different pseudo class, or adding an event that allows activation in your target browser, you should be able to achieve the effect you're looking for on mobile devices.

出于显而易见的原因,您可能不希望将

更改为

Hope that helps!

希望有所帮助!

#2

In your html, instead of <body>, do <body ontouchstart=""> Or in html5, just <body ontouchstart>

在你的html中,而不是,做或者在html5中,只需

#1