如何使用GSAP为动态创建的DOM元素添加动画效果？

你的动画失效的核心原因是：初始化GSAP时间轴时，动态创建的<h2>元素还未被添加到DOM中。GSAP在执行.to()方法时会立即查找目标元素，此时#recipeContainer h2不存在，导致动画没有绑定到任何元素，后续播放时间轴自然不会有效果。

下面提供两种可行的修复方案：

方案一：动态创建元素后再初始化动画 #

将动画逻辑放到元素创建完成之后执行，确保GSAP能找到目标元素：

document.querySelector('#btn').addEventListener('click',() => {
    getRecipe();
    animateRecipeTitles(); // 元素创建后再执行动画
});

function getRecipe(){
  let recipeTitles = `<h2><a href="#" class="recipeTitles">Cheese Burger</a></h2><h2><a href="#" class="recipeTitles">Ham Sandwich</a></h2>`
  document.querySelector('#recipeContainer').innerHTML = recipeTitles;
}

function animateRecipeTitles() {
  // 每次点击都创建新的时间轴并播放
  const timeline = gsap.timeline({duration: 1});
  timeline.to('#recipeContainer h2', {opacity: 1});
}

方案二：使用动态查询的目标函数 #

让GSAP在播放动画时才去查询目标元素，通过传递一个返回目标元素的函数作为.to()的参数：

document.querySelector('#btn').addEventListener('click',() => {
    getRecipe();
    timeline.play();
});

function getRecipe(){
  let recipeTitles = `<h2><a href="#" class="recipeTitles">Cheese Burger</a></h2><h2><a href="#" class="recipeTitles">Ham Sandwich</a></h2>`
  document.querySelector('#recipeContainer').innerHTML = recipeTitles;
}

const timeline = gsap.timeline({
    duration: 1,
    paused: true
});

// 用函数返回目标元素，播放时才会执行查询
timeline.to(
    () => document.querySelectorAll('#recipeContainer h2'),
    {opacity: 1}
);

如果不需要复用时间轴，可以直接在元素创建后调用gsap.to()：

document.querySelector('#btn').addEventListener('click',() => {
    getRecipe();
    gsap.to('#recipeContainer h2', {duration: 1, opacity: 1});
});

function getRecipe(){
  let recipeTitles = `<h2><a href="#" class="recipeTitles">Cheese Burger</a></h2><h2><a href="#" class="recipeTitles">Ham Sandwich</a></h2>`
  document.querySelector('#recipeContainer').innerHTML = recipeTitles;
}

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