不刷新页面添加class实现购物车图标ping动态效果的方法是什么？

解决方案 #

你当前的效果只在刷新时生效的核心原因是：.cart_ping元素是通过Liquid模板在服务端渲染时判断生成的，只有页面刷新时服务端才会重新读取购物车数据决定是否输出这个元素，前端异步更新购物车的逻辑不会触发服务端重新渲染，所以状态不会实时更新。

你可以按以下两步修改即可实现无刷新切换效果：

第一步：调整模板代码 #

去掉原来的Liquid条件渲染逻辑，默认输出.cart_ping元素，后续通过JS控制显隐：

<span class="lnr lnr-cart"></span> <span class="Header__CartCount hotiya"></span>
<div class="cart_ping"></div>

可以在你的样式文件中补充默认隐藏规则，原有ping动画的样式保留不变：

/* 默认隐藏ping效果 */
.cart_ping {
  display: none;
}
/* 激活状态显示并播放动画 */
.cart_ping.active {
  display: block;
}

第二步：修改_rerenderCart重渲染逻辑 #

在现有购物车更新逻辑中加入控制ping效果显隐的代码，修改后的完整JS片段如下：

{
  key: "_rerenderCart",
  value: function(e) {
    var t = this,
        n = a["default"].nodeListToArray(document.querySelectorAll(".Header__CartDot")),
        i = a["default"].nodeListToArray(document.querySelectorAll(".Header__CartCount")),
        // 新增：获取所有购物车ping元素
        pingEls = a["default"].nodeListToArray(document.querySelectorAll(".cart_ping"));
    return n.forEach(function(e) {
      0 === t.itemCount ? e.classList.remove("is-visible") : e.classList.add("is-visible")
    }),
    // 新增：根据购物车数量切换ping元素的激活状态
    pingEls.forEach(function(el) {
      0 === t.itemCount ? el.classList.remove("active") : el.classList.add("active")
    }),
    i.forEach(function(e) {
      e.textContent = t.itemCount
    }), 
    // 原有fetch逻辑完全保留无需修改
    fetch("/cart?view=" + (this.options.drawer ? "drawer" : "ajax") + "&timestamp=" + Date.now(), {
      credentials: "same-origin",
      method: "GET"
    }).then(function(n) {
      if (t.options.drawer && e) {
        var i = new TimelineLite({
          onComplete: function() {
            n.text().then(function(e) {
              t._replaceContent(e)
            })
          }
        });
        i.to(e, .5, {
          height: 0,
          opacity: 0,
          ease: Cubic.easeOut
        }, 0), 0 === t.itemCount && i.to(t.element.querySelector(".Drawer__Footer"), .5, {
          y: "100%",
          transition: "none",
          ease: Cubic.easeInOut
        }, 0)
      } else n.text().then(function(e) {
        t._replaceContent(e)
      })
    })
  }
}

修改完成后，只要购物车数量变动触发_rerenderCart方法，就会自动同步ping效果的显示状态，无需刷新页面。

内容的提问来源于stack exchange，提问作者Sunny