Question

我是TweenMax的新用户，因为标题显示我在实际访问我的网站之前使用它进行预加载动画。目前preload是'动画，但一旦完成，它不会清除/隐藏自己显示网站，我不知道如何解决这个问题？如果有人能帮助我，我将不胜感激。这是我的一些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

您可以添加＆＃39; onComplete＆＃39;回调以在完成后隐藏它。

<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预装动画，因此无法访问我的网站？我该如何解决这个问题？

1 个答案: