收藏
回答

调用获取手机号控件,导致页面已有的 @keyframes 动画被暂停了?

  1. 定义获取手机号组件<button open-type="getPhoneNumber">、定义<loading>使用 @keyframes 实现菊花转动效果
  2. 点按钮时展示<loading>,同时调起获取手机号浮层(微信控件)
  3. 微信控件弹出期间,安卓手机,@keyframes 提供的动画效果都被暂停了
回答关注问题邀请回答
收藏

1 个回答

  • CRMEB
    CRMEB
    2023-09-18

    利用 CSS3 animationend 事件:使用 animationend 事件来监听动画结束的时机,在该事件触发后重新开启动画效果。通过给展示获取手机号浮层的元素绑定 animationend 事件,并在事件回调函数中设置动画效果。

    // 绑定 animationend 事件
    document.getElementById("phoneModal").addEventListener("animationend", function() {
      // 重新开启动画效果
      document.getElementById("loadingElement").classList.add("loading-animation");
    });
    


    /* 定义动画 */
    @keyframes loading {
      /* 定义动画帧 */
    }
    
    /* 应用动画效果 */
    .loading-animation {
      animation: loading 2s infinite;
    }
    


    2023-09-18
    有用
    回复
登录 后发表内容