javascript - 删除类隐藏后，窗口调整大小不起作用

Question

我有一个使用CSS动画和速度的介绍屏幕，以及一个setTimeout函数，该函数可以隐藏fadeOut和addClass。同时它还使用隐藏在SVG全屏图像上的removeClass进行fadeIn。问题是当 SVG 图像加载时，它不是全屏的。我相信这与 SVG 在介绍运行的同时加载这一事实有关。一旦调整窗口大小，SVG 就会全屏显示。我不确定什么路线是解决这个问题的最佳方法，我有一种感觉，我正在以错误的方式制作介绍动画。请帮忙!这是下面的代码，我还有一个 codepen.io here.

 $(document).ready(function() {
   $(".intro-animation .left")
   	.delay(400)
   	.velocity({ width: 0 }, 1200);
   $(".intro-animation .right")
   	.delay(1500)
   	.velocity({ width: 0 }, 1200);

   setTimeout(function(){
     $(".intro-animation").fadeOut("slow", function() {
         $(this).addClass("intro-hidden");
     });
       $("#overlay").fadeIn("slow", function() {
           $(this).removeClass("intro-hidden");
       });
   },3000)
 });
// DRAW SVG MASK /////////////////////////////
var svg = document.querySelector("#svg__bg");
var tl = new TimelineMax({onUpdate:onUpdate});
var pt = svg.createSVGPoint();
var counter = document.querySelector("#counter");
var ratio = 0.5625;

TweenMax.set("#instructions, #dial", {xPercent: -50});

tl.to("#masker", 2, {attr:{r:2400}, ease:Power2.easeIn});
tl.reversed(true);

function mouseHandler() {
  tl.reversed(!tl.reversed());
}

function getPoint(evt){
  pt.x = evt.clientX;
  pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}

function mouseMove(evt) {
  var newPoint = getPoint(evt);
  TweenMax.set("#dot", {attr:{cx:newPoint.x, cy:newPoint.y}});
  TweenMax.to("#ring, #masker", 0.88, {attr:{cx:newPoint.x, cy:newPoint.y}, ease:Power2.easeOut});
 }

function onUpdate() {
  var prog = (tl.progress() * 100);
  counter.textContent = prog.toFixed();
}

function newSize() {
  var w = window.innerWidth ;
  var h = window.innerHeight;
  if (w > h * (16/9) ) {
    TweenMax.set("#svg__bg", { attr: { width: w, height: w * ratio } });
  } else {
    TweenMax.set("#svg__bg", { attr: { width: h / ratio, height: h } });
  }
  var data = svg.getBoundingClientRect();
  TweenMax.set("#svg__bg", {x:w/2 - data.width/2});
  TweenMax.set("#svg__bg", {y:h/2 - data.height/2});
}

window.addEventListener("mousedown", mouseHandler);
window.addEventListener("mouseup", mouseHandler);
window.addEventListener("mousemove", mouseMove);

newSize();
window.addEventListener("resize", newSize);

@import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap');

body {
	min-height: 100vh;
  background-color: #1F242D;
	cursor: none;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}
.intro-hidden {
	display: none;
	visibility: hidden;
}
.intro-animation {
		  background-color: #2d5a87;
		  padding: 0;
		  height: 100vh;
		  overflow: hidden;
		  z-index: 1;
		}
		.intro-animation .left, .intro-animation .right {
		  bottom: 0;
		  height: 100%;
		  position: absolute;
		  top: 0;
		  z-index: 2;
		}
		.intro-animation .left {
		  background: #5B6076;
		  right: 50%;
		  width: 50%;
		}
		.intro-animation .right {
		  background: #66BBDE;
		  right: 0;
		  width: 50%;
		}

		.intro-animation .intro-logo {
		  width: 470px;
		  height: 60px;
		  position: absolute;
		  top: 0; bottom: 0; left: 0; right: 0;
		  margin: auto;
		  z-index: 3;
		}
		.intro-animation .box {
		  width: 60px;
		  height: 60px;
		  border-radius: 10px;
		  background: #0074D9;
		  color: #fff;
			font-family: 'MonumentExtended-Regular';
		  font-size: 1.5em;
			line-height: 60px;
		  text-align: center;
		  position: absolute;
		  left: 0%;
		  z-index: 3;
		  animation: test1 3s;
		}
		.intro-animation .box:after {
		  content: "";
		  display: block;
		  height: 90%;
		  width: 1px;
		  background: #fff;
		  position: absolute;
		  top: 0; right: -10px; bottom: 0;
		  margin: auto;
		  animation: expand1 3s;
		}

		.intro-animation .text {
		  height: 60px;
		  color: #fff;
		  padding-left: 80px;
			font-family: 'MonumentExtended-Regular';
		  font-size: 1.5em;
			line-height: 60px;
		  animation: fade1 3.5s;
		}

		@keyframes expand1 {
		  0% { height: 0; }
		  40% { height: 0; }
		  60% { height: 80%; }
		}

		@keyframes test1 {
		  0% { transform: scale(0);  left: 39%; }
		  40% { transform: scale(1);  left: 39%;}
		  60% { transform: scale(1);  left: 39%;}
		  100% { left: 0%; }
		}

		@keyframes fade1 {
		  0% { opacity: 0; }
		  65% { opacity: 0; padding-left: 40px; }
		  100% { opacity: 1; padding-left: 80px; }
		}
.intro-svg {
	position: relative;
  padding: 0;
  margin: 0;
	width: 100%;
  min-height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  z-index: 1;
}
.loaded .intro-svg {
	animation-name: fadeInDown;
	animation-duration: 2.5s;
	animation-timing-function: ease;
}
.svg__container {
	height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.svg__image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: none;
}
#instructions {
  position: absolute;
  padding: 12px;
  top: 1em;
  background: rgba(0, 0, 0, 0.55);
  right: 1em;
  cursor: none;
  padding-top: 80px;
  user-select: none;
  border-radius: 4px;
}
#instructions p {
  margin-top:0;
  font-size: 0.8em;
	color: #FFF;
}
#dial {
  position: absolute;
  top: 0;
  left: 50%;
}
.text-svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: none;
  z-index:2;
}
.impact-text {
  font-size: 7em;
  line-height: 1.2;
  text-transform: uppercase;
}

<div class="intro-animation">
  <div class="left"></div>
  <div class="right"></div>

  <div class="intro-logo">
    <div class="box">RC</div>
    <div class="text">
      <span class="first">Robbie</span>
      <span class="second">Crenshaw</span>
    </div>
  </div>
</div>

<div id="overlay" class="intro-hidden">
<div class="intro-svg">
          <div class="svg__container">
            <svg id="svg__bg" class="svg__image" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="1600" height="900" viewBox="0 0 1600 900">
              <defs>
                <radialGradient id="mask-gradient">
                  <stop offset="80%" stop-color="#fff"/><stop offset="100%" stop-color="#000" />
                </radialGradient>
                  <mask id="the-mask">
                    <circle id="masker" r="250" fill="url(#mask-gradient)" cx="800" cy="450">
                    </circle>
                  </mask>
                  <mask id="mask-text" width="100" height="100" x="0" y="0">
                    <text id="masker" class="impact-text row-1" fill="none" stroke="#fff" stroke-width="3" x="10.1%" y="42%">A</text>
                    <text id="masker" class="impact-text row-2" fill="white" x="10%" y="55%">Digital</text>
                    <text id="masker" class="impact-text row-3" fill="white" x="10%" y="68%">Designer</text>
                  </mask>
              </defs>
                <image id="lines" xlink:href="https://i.imgur.com/1TQRj56.jpg" x="0" y="0" width="1600" height="900" />
                <g id="mask-reveal" mask="url(#the-mask)">
                  <image id="regular" xlink:href="https://i.imgur.com/7VtEKv3.jpg" x="0" y="0" width="1600" height="900" />
                </g>
                <g mask="url(#mask-text)">
                  <image id="text-before" xlink:href="https://i.imgur.com/7VtEKv3.jpg" x="0" y="0" width="1600" height="900" />
                </g>
                <circle id="ring" r="20" fill="none" stroke="#D74A53" stroke-width="2" cx="800" cy="450" />
                <circle id="dot" r="4" fill="#D74A53" cx="800" cy="450"/>
            </svg>

            <div id="instructions">
              <svg id="dial" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                <text transform="translate(55 56)" text-anchor="start" font-size="12" fill="#fff">%</text>
                <text id="counter" transform="translate(55 56)" text-anchor="end" font-size="12" fill="#fff">0</text>
              </svg>
              <p>Hold the mouse button,</p><p>for something amazing!</p>
            </div>
          </div>
        </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

Answer 1

你只是在不适当的时间调用了newSize，调用它

   setTimeout(function(){
     $(".intro-animation").fadeOut("slow", function() {
         newSize();                                    // <- Here
         $(this).addClass("intro-hidden");
     });
       $("#overlay").fadeIn("slow", function() {
           $(this).removeClass("intro-hidden");
       });
   },3000)

应该可以