如何在TweenLite动画中正确获取伪元素::before？

看起来你卡在了循环里动态获取伪元素动画规则的问题上，我来帮你拆解问题和给出可行的解决办法：

问题根源 #

你之所以会拿到null并触发Cannot tween a null target错误，核心原因是CSSRulePlugin.getRule()需要传入的是合法的CSS选择器字符串，而你当前的写法并没有传递有效的选择器：

• 第一种写法里$(this.items[i])返回的是jQuery对象，直接拼接:before会得到类似[object Object]:before的无效字符串；
• 第二种写法里this.items[i]如果是DOM元素对象，直接拼接:before也不是合法的CSS选择器，自然找不到对应的伪元素规则。

解决办法 #

根据this.items存储的是DOM元素还是jQuery对象，提供两种针对性的方案：

方案1：如果this.items里是DOM元素 #

先从DOM元素中提取出能唯一匹配它的CSS选择器（比如id、类名），再拼接:before：

for (let i = 0; i < this.items.length; i++) {
  const elem = this.items[i];
  // 优先使用id选择器（唯一性更高）
  let selector;
  if (elem.id) {
    selector = `#${elem.id}:before`;
  } else {
    // 没有id的话取第一个类名（如果有多个类，可按需组合确保唯一）
    const firstClass = elem.className.split(' ')[0];
    selector = `.${firstClass}:before`;
  }
  // 获取伪元素规则并执行动画
  const rule = CSSRulePlugin.getRule(selector);
  if (rule) { // 加个判断避免null报错
    TweenLite.to(rule, 0.5, { cssRule: { opacity: 1 } });
  }
}

方案2：如果this.items里是jQuery对象 #

从jQuery对象中提取选择器信息，同样优先用id确保唯一性：

for (let i = 0; i < this.items.length; i++) {
  const $elem = $(this.items[i]);
  let selector;
  if ($elem.attr('id')) {
    selector = `#${$elem.attr('id')}:before`;
  } else {
    const firstClass = $elem.attr('class').split(' ')[0];
    selector = `.${firstClass}:before`;
  }
  const rule = CSSRulePlugin.getRule(selector);
  if (rule) {
    TweenLite.to(rule, 0.5, { cssRule: { opacity: 1 } });
  }
}

更稳妥的方案：使用临时类名 #

如果担心类名/id重复导致选择器匹配错误，可以给每个元素添加唯一的临时类，用完再移除：

for (let i = 0; i < this.items.length; i++) {
  const $elem = $(this.items[i]);
  const tempClass = `temp-pseudo-animate-${i}`;
  $elem.addClass(tempClass);
  
  const rule = CSSRulePlugin.getRule(`.${tempClass}:before`);
  if (rule) {
    TweenLite.to(rule, 0.5, {
      cssRule: { opacity: 1 },
      onComplete: () => {
        // 动画完成后清理临时类
        $elem.removeClass(tempClass);
      }
    });
  }
}

关键注意事项 #

• 确保你的伪元素::before在CSS中已经提前定义：CSSRulePlugin只能获取已存在的CSS规则，无法动态创建不存在的伪元素样式。比如你的CSS里必须有类似代码：

/* 举例：确保伪元素有基础样式定义 */
.myClass:before {
  content: ''; /* 伪元素必须有content属性才能生效 */
  opacity: 0;
  /* 其他必要样式：宽度、高度、定位等 */
}

• 统一GSAP版本：你当前引入的CSSRulePlugin是2.0.1，而核心库是2.0.0，尽量保持版本一致，避免潜在的兼容性问题。

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