javascript - setInterval淡入然后淡出纯JavaScript no jQuery或CSS

我正在尝试实现淡入/淡出功能，该功能在按钮单击时运行，具体取决于是否更改了某些数据。我正在使用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>