Question

我正在尝试实现淡入/淡出功能，该功能在按钮单击时运行，具体取决于某些数据是否已更改。我正在使用角度，但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的计算错误，因为它始终为零。其次，第二个函数不会返回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淡入然后淡出纯javascript没有jquery或css

1 个答案: