按钮加载动画不会改变 iPhone 中的背景颜色JS/CSS

问题描述

我有一个基于单击事件侦听器添加动画的按钮。当我单击按钮时，它会添加禁用属性以及我创建的自定义类。这个动画在桌面和安卓上运行良好，但在 iPhone 上它执行我的功能，它附加在我的按钮内部，它还添加了禁用的类和属性。当我点击时，跨度被添加，我可以看到部分动画在工作。但是，按钮的背景和文本颜色根本不会改变（仅在 iPhone 中）。

这是按钮代码：

<button id="js-go-to-pay" class="btn btn-primary js-animateButtonBeforeSend">
  Continue
</button>

这是JS：

 $('.js-animateButtonBeforeSend').on('click',function () {
           $('.js-animateButtonBeforeSend').prop('disabled',true);
           $('.js-animateButtonBeforeSend').append('<span></span>');
           $('.js-animateButtonBeforeSend').addClass('animate-addToCartdisabled');
 });

这里是少：

.animate-addToCartdisabled{
    span{
    animation: dottyping 1.5s infinite linear;
    display: inline-block;
    position: relative;
    left: 4px;
    height: 3px;
    border-radius: 50%;
    color: @btn-disabled-color;
    Box-shadow: -4px 0 0 0 @btn-disabled-color,4px 0 0 0 @btn-disabled-color,12px 0 0 0 @btn-disabled-color;
    width: 3px;
    }
   
    a&,button&:disabled{
     background: @whitesmoke !important;
     color: @grey-light !important;
     border: 1px solid @btn-disabled-border !important;
     Box-shadow: none !important;
    }
    
}


@keyframes dottyping {
    0% {
        Box-shadow: -4px 0 0 0 @btn-disabled-color,12px 0 0 0 @btn-disabled-color;
    }
    16.667% {
        Box-shadow: -2px -4px 0 0 @btn-disabled-color,12px 0 0 0 @btn-disabled-color;
    }
    33.333% {
        Box-shadow: -4px 0 0 0 @btn-disabled-color,12px 0 0 0 @btn-disabled-color;
    }
    50% {
        Box-shadow: -4px 0 0 0 @btn-disabled-color,5px -4px 0 0 @btn-disabled-color,12px 0 0 0 @btn-disabled-color;
    }
    66.667% {
        Box-shadow: -4px 0 0 0 @btn-disabled-color,12px 0 0 0 @btn-disabled-color;
    }
    83.333% {
        Box-shadow: -4px 0 0 0 @btn-disabled-color,12px -4px 0 0 @btn-disabled-color;
    }
    100% {
        Box-shadow: -4px 0 0 0 @btn-disabled-color,12px 0 0 0 @btn-disabled-color;
    }
}

这个在span元素中创建的动画正在运行并且可以看到。但是，只有背景和文本颜色不起作用。我还测试了用 touchstart 替换 click 事件，但它没有解决问题。我还测试了用没有 jQuery 的纯 javascript 替换所有内容，并得到了相同的结果。

有人可以帮我吗？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ecmascript-5 javascript jquery less