严格使用 JS/HTML 创建文本淡入/淡出 [英] Create a text fade in/fade out using strictly JS/HTML
问题描述
我想在我的 HTML 网页上显示文本，该文本将通过淡入基本上闪烁"，并在动画之间的 1 秒间断不断地退出.这必须严格使用 JS 来完成，没有 CSS，没有 jQuery.
I want to display text on my HTML webpage that will basically "flash" by fading in, and back out constantly with a 1 second break between the animation. This has to be done strictly using JS, no CSS, no jQuery.
我的想法如下:
*Creating a div strictly for the text
*Creating a function to house our JS
*Create the fade animation by adjusting div style.opacity
我已经使用 CSS 完美地完成了这项工作，我完全不知道从严格的 JS 方面开始.
I've completed this perfectly using CSS, I just have absolutely no idea where to start in terms of strictly JS.
这是我在 CSS 中所做的:
Here's what I did in CSS:
@keyframes fadeIn {
from { opacity: 0; }
}
.play {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
animation: fadeIn 1s infinite alternate;
}
如果我只使用 JS，有人能指出我应该做什么的好的方向吗?
Can someone point me in a good direction of what I should be doing if im only using JS?
推荐答案
添加一个 setinterval 函数并在该函数内切换 css 到文本这是我尝试过的代码.希望能帮到你.
Add a setinterval function and inside the function toggle the css to the text
here is the code I have tried. Hope it helps you.
var speed = 1000;
var t = setInterval(function(){
var slideSource = document.getElementById('textnode');
slideSource.classList.toggle('fade');
}, speed);#textnode {
opacity: 1;
transition: opacity 1s;
}
#textnode.fade {
opacity: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="textnode">Sample Text</div>
</body>
</html>这篇关于严格使用 JS/HTML 创建文本淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
