完成后无法清除我的 TweenMax 预加载动画，所以我无法访问我的网站？我该如何解决这个问题？

Question

我是 TweenMax 的新手，正如标题所示，我在实际访问我的网站之前将其用于预加载动画。目前，预加载会执行其“动画”，但一旦完成，它不会 clear/hide 本身来显示网站，我不确定如何解决此问题？如果有人可以帮助我们，我将不胜感激。这是我的一些 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">
    <meta name="description" content="Website for an upcoming RnB Singer.">
    <meta name="author" content="Dominic Robeson">

    <title>Vix Sambi | Offical Website</title>

    <!-- Custom CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Caveat+Brush" rel="stylesheet">
    <link href="css/stylish-portfolio.css" rel="stylesheet">
    <link href="css/lightbox.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

<!--JQuery/JS-->
        <script   src="js/jquery-3.1.0.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>


    </head>

    <body>

        <!-- ====== PRELOADER ====== -->

    <div class="preloader">
      <img class="logo-svg" src="img/logo2.svg" />
    </div>

        <!-- Navigation -->
        <div class='navbar-toggle' title='Menu'>
            <div class='bar1'></div>
            <div class='bar2'></div>
            <div class='bar3'></div>
        </div>

        <nav class="nav-hide">


        <ul>
            <li><a href="#top">Home</a></li>
            <li><a href="#songs">Music</a></li>
            <li><a href="#video">Video</a></li>
            <li><a href="#me">Bio</a></li>
            <li><a href="#pics">Gallery</a></li>
            <li><a href="#Latnews">News</a></li>
            <li><a href="#events">Events</a></li>
          </ul>
        </nav>

        <!-- Header -->
        <header id="top" class="header">
            <a href="#top"><img class="logo" src="img/logo2.svg"></a>

            <div class="container">
                <div class="row">
                 </div>
            </div>

        </header>

这是预加载动画的 javascript：

  <script>
    var tl = new TimelineMax({
  repeat: 2
});

tl.add(
  TweenMax.from(".logo-svg", 2, {
    scale: 0.5,
    rotation: 360,
    ease: Elastic.easeInOut
  })
);

tl.add(
  TweenMax.to(".logo-svg", 2, {
    scale: 0.5,
    rotation: 360,
    ease: Elastic.easeInOut
  })
);
</script>

Answer 1

您可以添加一个 'onComplete' 回调以在完成时隐藏它。

<script>
    var tl = new TimelineMax({
  repeat: 2, 
    onComplete : function () {
       // example hide the target 
        this._last.target[0].style.display = 'none'; 
       // example hide the target parent node 
        this._last.target[0].parentNode.style.display = 'none'; 
    }
});

tl.add(
  TweenMax.from(".logo-svg", 2, {
    scale: 0.5,
    rotation: 360,
    ease: Elastic.easeInOut
  })
);

tl.add(
  TweenMax.to(".logo-svg", 2, {
    scale: 0.5,
    rotation: 360,
    ease: Elastic.easeInOut
  })
);
</script>

完成后无法清除我的 TweenMax 预加载动画，所以我无法访问我的网站？我该如何解决这个问题？

Can’t clear my TweenMax preload animation after it finishes so I can’t access my website? How do I resolve this?

javascript

gsap