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

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

本文关键字：不能 我的 何解决 解决 问题 清除 访问 动画 加载 TweenMax 网站      更新时间：2023-09-26

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

你可以添加一个'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>
相关文章：