【发布时间】：2020-04-17 02:12:25
【问题描述】：
我有一个使用 CSS 动画和速度的介绍屏幕，并带有一个 setTimeout 函数，该函数可以隐藏 fadeOut 和 addClass。同时它还在SVG全屏图像上隐藏了一个带有removeClass的fadeIn。问题是当 SVG 图像加载时，它不是全屏的。我相信这与 SVG 在 intro 运行的同时加载这一事实有关。调整窗口大小后，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>【问题讨论】：
标签： javascript jquery html css svg