我正在尝试实现淡入/淡出功能,该功能在按钮单击时运行,具体取决于是否更改了某些数据。我正在使用angular,但是ngAnimate无法工作,所以我想用纯js来做。我目前所拥有的将使文本闪烁一秒钟,然后什么也不做。这是在我的控制器内。
var warningText = document.getElementById('warningText');
warningText.style.display = 'inline'
$scope.warningText = "Warning: No Data was updated.";
var op = 0.0;
var fadeIn = setInterval(function() {
if (op >= 1) {
clearInterval(fadeIn);
fadeOut(op);
}
warningText.style.opacity = op;
op += op * 0.1;
}, 50);
var fadeOut = function(op) {
setInterval(function() {
if (op <= 0.1) {
clearInterval(fadeOut);
warningText.style.display = 'none';
}
warningText.style.opacity = op;
op -= op * 0.1;
}, 50);
}
最佳答案
您计算的op
是错误的,因为它将始终为零。其次,第二个函数不会从setInterval
返回值,因此您将永远无法清除该间隔。
这是您仅需一个时间间隔即可完成的方法,每次达到边界值时,不透明度的增量符号都会反转:
var warningText = document.getElementById('warningText');
function flickerMessage(msg) {
var op = 0.1;
var increment = +0.1;
warningText.textContent = msg;
warningText.style.opacity = 0;
warningText.style.display = 'inline';
var timer = setInterval(function() {
op += increment;
warningText.style.opacity = op;
if (op >= 1) increment = -increment;
if (op <= 0) {
warningText.style.display = 'none';
clearInterval(timer); // end
}
}, 50);
}
flickerMessage('Warning you');
<div id="warningText" style="display:none; opacity: 0">warning text</div>
<hr>