Trying to animate dynamically created elements with GSAP答案

【问题标题】：Trying to animate dynamically created elements with GSAPTrying to animate dynamically created elements with GSAP
【发布时间】：2022-12-19 07:29:29
【问题描述】：

I am trying to animate elements that are added to the DOM via javascript with GSAP.

Here is the MRE:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    
    <title>Recipe Search</title>
</head>
<body>
    <section id="searchBackgroundImage">
        <section id="searchSection">
            <h1>What's In The Fridge</h1>
           
            <button type="button" id="btn">Seach!</button>

            <div id="recipeContainer"></div>

            <div id="test"><h2>Test</h2></div>

        </section>
    </section>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
    <script text="text/javascript" src="js/main.js"></script>
</body>
</html>

CSS

h2 {
  opacity: 0.1;
}

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(
        '#recipeContainer h2', {
            opacity: 1
        }
)

So I would like to change the opacity of the h2s.

It is not working because the h2s don't exist when the page first loads.

I was hoping that setting it to paused and only having it play on click would fix the problem, but unfortunately not.

If I change

timeline
    .to(
        '#recipeContainer h2', {
            opacity: 1
        }
)

timeline
    .to(
        '#test h2', {
            opacity: 1
        }
)

Then it works fine for that element.

So it has to be the element being dynamically created but I haven't been able to find a solution.

I've been reading the docs and it seems like I might be able to use TimelineMax and onComplete but I can't figure out how to implement it here.

Here is the codepen: https://codepen.io/acodeaday/pen/RwJbrWa

Thank you for any help.

【问题讨论】：

标签： javascript html css gsap

【解决方案1】：

The problem here is that the javascript file is compiled before the click event. This means that the browser encounters the following error before the event listener is called.

Solution:Defining the timeline.to() properties inside the event listener will circumvent this problem.

document.querySelector("#btn").addEventListener("click", () => {
  getRecipe();

  timeline.to("#recipeContainer h2", {
    opacity: 1,
  });
  timeline.play();
});

【讨论】：

Thank you for responding. It works if i do that on codepen, it works if i do that with the test <div><h2> on my site, but if I try it with #recipeContainer h2 i get the same error you got above. Could it be that it is because the dynamic content that is added on the real site is from an api call that is parsed and the recipe titles are extracted from an array of objects then wrapped in the <h2> tags? So maybe it delays it further which is why it cannot be found?
@acodeaday Yeah, I think so! It definitely has to do with the fact that #recipeContainer h2 elements are not present in the document when it is initially parsed.