带有波纹动画的 ng-click 在 Safari iOS 上的点击功能与在 PC 上的点击不同

Posted 2023-03-14

【中文标题】带有波纹动画的 ng-click 在 Safari iOS 上的点击功能与在 PC 上的点击不同

【英文标题】：Clicks on Safari iOS function differently than on PC with ng-click with ripple animation

【发布时间】：2017-04-20 15:07:48

【问题描述】：

我对 ios 上的 Safari 上的 ng-click 有一个奇怪的问题。我有三个带有悬停动画的 ng-click 处理程序按钮。

<div class="switcher switcher--3buttons">
    <button ng-repeat="item in $ctrl.items track by $index" ng-click="$ctrl.onChange( index: $index )"
        class="switcher-tab is-active"
        ng-class=" 'is-active': $ctrl.chosen == item.value || $ctrl.selectedIndex === $index "
        ng-disabled="item.disabled">
        <span class="tab-text">D</span>
    </button>
    <button ng-repeat="item in $ctrl.items track by $index" ng-click="$ctrl.onChange( index: $index )"
        class="switcher-tab"
        ng-class=" 'is-active': $ctrl.chosen == item.value || $ctrl.selectedIndex === $index "
        ng-disabled="item.disabled">
        <span class="tab-text">W</span></button>
    <button ng-repeat="item in $ctrl.items track by $index" ng-click="$ctrl.onChange( index: $index )"
        class="switcher-tab"
        ng-class=" 'is-active': $ctrl.chosen == item.value || $ctrl.selectedIndex === $index "
        ng-disabled="item.disabled">
        <span class="tab-text">M</span>
   </button>

问题在于长按与短按。在 PC 上，两者都具有所需的效果 - 悬停动画随所选值的变化而变化。在 Safari 上，您在触控板上轻轻单击时会出现正确的行为，较长的单击会产生正确的悬停动画，但所选值的变化不正确。

可以轻松重现问题here

我怀疑Force Touch，但我不确定，因为我没有气泡动画。

我完全愿意接受如何解决问题的建议

【参考方案1】：

这个问题发生在 Safari 上，因为按钮内部的跨度带有波纹效果动画。修复是纯 CSS：

button > span 
   pointer-events: none; 

【讨论】：

这对其他波纹动画库也是一个很好的提示！