Как показать страницу после анимации в комплекте с Лотти и Javascript - PullRequest
Новая
       28

Как показать страницу после анимации в комплекте с Лотти и Javascript

2 голосов
/ 24 сентября 2019

Я довольно новичок, экспериментируя с SVG-анимацией.Я сделал анимацию и загрузил ее на мою простую HTML-страницу с Лотти.Но я пытался заставить его уничтожить себя и показать остальное содержимое страницы, которое является заголовком и p.

Я видел этот код, погуглил его, но не уверен, куда его поместить, пошел за чемЯ думал, что это было логично, и вставить его прямо под.Но не получил то, что хотел.

ani.addEventListener('complete', function(){ ani.destroy() })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="master.css">
    <script src="master.js"></script>    
    <script src="lottie.js"></script>
    <title>Document</title>
</head>
<body onload="start()">

    <div id="velkommen"></div>

    <header>
        <h1>Min header</h1>
    </header>

    <p>tekstteksttekstketkekte</p>


</body>
</html>


window.onload(start())

function start(){
    var container = document.getElementById("velkommen");
    var animation = bodymovin.loadAnimation({    
        container: container, 
        renderer: 'svg',
        loop: false,
        autoplay: true,
        path: 'data.json'
     });
}

1 Ответ

0 голосов
/ 25 сентября 2019

Я узнал!Incase кто-то еще задавался вопросом: 

function start(){
    var anim;
var animdata ={
    container: document.getElementById("velkommen"),
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "data.json"
};
anim = bodymovin.loadAnimation(animdata);
anim.addEventListener('complete',stopa);
}

function stopa(){
    document.getElementById("velkommen").style.display = "none";
}
...