setInterval 淡入淡出 pure javascript no jquery or css

Question

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

Answer 1

您对 op 的计算是错误的，因为它始终为零。其次，第二个函数不会 return 来自 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>

setInterval 淡入淡出 pure javascript no jquery or css

setInterval to fade in then fade out pure javascript no jquery or css

javascript

fade

setinterval

angularjs