javascript - 不能多次更改 html 元素的不透明度
问题描述
我希望我<div>
的慢慢变得可见!
这是我的代码:
var Thread = {
sleep: function(ms) {
var start = Date.now();
while (true) {
var clock = (Date.now() - start);
if (clock >= ms) break;
}
}
};
function anime()
{
var elem = document.getElementById('tagd');
document.getElementById('tagd').style.opacity += 0.4;
console.log(document.getElementById('tagd').style.opacity);
Thread.sleep(1000);
document.getElementById('tagd').innerHTML ="<h1>Sometext</h1>";
console.log("do");
function frame()
{
num = 0.1;
elem.style.opacity += num;
}
}
它有效,但是当我将其更改为:
var Thread = {
sleep: function(ms) {
var start = Date.now();
while (true) {
var clock = (Date.now() - start);
if (clock >= ms) break;
}
}
};
function anime()
{
var elem = document.getElementById('tagd');
document.getElementById('tagd').style.opacity += 0.4;
console.log(document.getElementById('tagd').style.opacity);
Thread.sleep(1000);
document.getElementById('tagd').style.opacity += 0.4;
console.log(document.getElementById('tagd').style.opacity);
function frame()
{
num = 0.1;
elem.style.opacity += num;
}
}
或setInterval
第二次opacity
不改变!接缝,我不能多次改变不透明度..
html/css 代码如下:
<html>
<style>
#tagd{
width: 500px;
height: 500px;
background: darkred;
opacity: 0;
}
</style>
<head>
<script src="test.js"></script>
</head>
<body>
<input type="button" onclick="anime()">
<div id="tagd"></div>
</body>
</html>
解决方案
您可以尝试使用CSS 过渡而不是 JS。创建两个 CSS 类并使用 JS 更改它们。
例如。CSS:
#tagd {
opacity: 0;
}
.visible {
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1!important;
}
JS:
function anime() {
var element = document.getElementById("tagd");
element.classList.toggle("visible");
}
推荐阅读
- java - Netbeans 中的 XML 部署
- ruby - Ruby 类中的继承
- sublimetext3 - 按下 Enter 后没有额外的行 Sublime Text 3
- reactjs - 位置路径名删除反应中错误路径上的图标
- javascript - 获得 TypeError: state.posts 在看似成功的 POST 请求之后不可迭代
- python - 面对 ValueError:尝试使用不受支持的类型转换值(无)(
) 到张量 - python - 使用来自不同数据帧的键重命名和删除列
- .net - 检查是否从 .NET Core 应用程序配置了托管标识
- r - 如何从列中的项目中删除字符?
- python-2.7 - IOError: [Errno 2] 读取 tsv 文件时没有这样的文件或目录