我有一个javascript函数，该函数应该使paragraf中的字母从底部而不是从淡入淡出，但是当我将其插入html时，它只是显示纯文本...该函数应该可以正常工作，我认为我在做些错误的调用html。我要设置动画的文本是标题“文本为文本”中的文本。
主要的HTML代码
<link rel="stylesheet" href="javascript/javascripit.js">
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="css/utilities.css">
</head>
<body>
<!-- Navbar -->
<div class ="main">
<div class="navbar ">
<div class="container flex lead ">
<nav>
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="features.html">Proiecte</a></li>
<li><a href="docs.html">Recenzii</a></li>
</ul>
</nav>
<div>
<h1 class="ml7">
<span class="text-wrapper">
<span class="letters">Text is text</span>
</span>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</div>
<div class="social sm">
<a href="#"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#">Contact</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码+实用程序
.navbar {
background-color: var(--primary-color);
color: #fff;
min-height: 80px;
position: sticky;
top: 0;
}
.navbar ul {
display: flex;
flex-direction: row;
flex-grow:1;
}
.navbar a {
color: #fff;
padding: 10px;
margin: 0 2px;
}
.navbar a:hover {
border-bottom: 2px #fff solid;
}
.navbar .flex {
justify-content:space-between;
}
.navbar .social a{
margin: 0 2px;
flex-grow:1;
}
.navbar .social > *:nth-child(3){
font-size: 28px;
}
.ml7 {
position: relative;
font-weight: 900;
font-size: 3.7em;
}
.ml7 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}
.ml7 .letters {
transform-origin: 0 100%;
display: inline-block;
line-height: 1em;
}
.container {
max-width: 1400px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;
}
.main {
min-height: 100vh; /*add*/
height: 3000px; /*this is a test rule*/
}
.card {
background-color: #fff;
color: #333;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 10px;
}
和javascript函数
var textWrapper = document.querySelector('.ml7 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml7 .letter',
translateY: ["1.1em", 0],
translateX: ["0.55em", 0],
translateZ: 0,
rotateZ: [180, 0],
duration: 750,
easing: "easeOutExpo",
delay: (_el, i) => 50 * i
}).add({
targets: '.ml7',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
您的HTML会尝试像加载样式表一样加载Javascript。查看您的浏览器开发工具，您可能会在Javascript控制台中看到错误。使用<script src="whatever.js"></script>负载脚本。就您而言，这可能是：
<script src="javascript/javascripit.js"></script> /*mis-spelled name?? */
并且，您在评论中询问了<script></script>标签的放置位置。许多人将它们放在HTML页的末尾，紧接在</body>标记之前。这使浏览器可以在获取页面之前获取呈现页面所需的图像对象，并提供更好的用户体验。
无论在何处，你把你的<script></script>标签，像你这样的Javascript代码来操纵页面的文档对象模型（DOM）应该运行作为事件处理程序的DOMContentLoaded事件。换句话说，将您的Javascript包装在其中。
document.addEventListener('DOMContentLoaded', (event) => {
/* all your Javascript goes here */
});
这样，它不会在页面加载之前运行。如果您不这样做，并且Java脚本确实在HTML完全加载之前运行，则您的.querySelector()操作可能会返回null，从而导致Java脚本失败。
浏览器尝试并行执行许多操作，以加快其单击到页面可见的时间。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句