javascript - setInterval淡入然后淡出纯javascript，没有jquery或css

Question

我正在尝试实现淡入/淡出功能，该功能在单击按钮时运行，具体取决于某些数据是否已更改。我正在使用 Angular，但 ngAnimate 我无法开始工作，所以我想用纯 js 来完成。我目前所拥有的将使文本闪烁一秒钟，然后什么都不做。这是在我的 Controller 内部。

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);
}

Answer 1

您对 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>