Question

我有使用纯javascript制作的淡入功能，因为site显示。

function fadeIn(el) {
  var opacity = 0;

  el.style.opacity = 0;
  el.style.filter = '';

  var last = +new Date();
  var tick = function() {
    opacity += (new Date() - last) / 400;
    el.style.opacity = opacity;
    el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';

    last = +new Date();

    if (opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

我需要的是在更改按钮文本时应用此转换，例如：

var firstChild = document.getElementById('my-button').firstChild;
firstChild.data = 'Another text';
fadeIn(firstChild);

当然这不会按预期工作，但我想要一些东西来实现一种行为，即在更改文本上，过渡淡出仅触发文本而不是整个按钮。

有没有办法实现这个目标？

Answer 1

要更改文字颜色，使用此功能，您可以使用RGBA设置颜色 - A代表Alpha通道。

所以，像这样：

el.style.color = "rgba(0,0,0, "+ OPACITY +")" // Opacity is 0 - 1

您还可以使代码更加模块化，允许您使用此淡入淡出功能编辑任何样式属性。

function fadeIn(el,prop,color) {
  var opacity = 0;

  el.style[prop] = 0;

  var last = +new Date();
  var tick = function() {
    opacity += (new Date() - last) / 400;
    el.style[prop] = "rgba("+color+","+opacity+")";

    last = +new Date();

    if (opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

现在你可以做到这两点：

fadeIn(firstChild,"background", "255,0,0"); // fade in background to red
fadeIn(firstChild,"color", "0,0,0"); // fade in text to black

Answer 2

由于您使用的是firstChild，我假设您的文本位于button元素的子元素内，如果是这种情况，则可以使用。

点击底部的蓝色“运行代码段”按钮，查看其实际效果。

btn.addEventListener('click', function(){fadeOut(this.firstChild, newText)});

var newText = "World!";

function fadeOut(e, nT) {
 o=1; 
 t=setInterval(function () {
  if(o <= 0.1){
   clearInterval(t);
   e.style.filter = "alpha(opacity=0)";
    if(nT != undefined) {
     e.innerHTML = nT;
     fadeIn(e);
    }  
 }
  e.style.opacity = o;
  e.style.filter = 'alpha(opacity='+o*100+")";
  o-=o*0.05;
 }, 10);
}

function fadeIn(e) {
 o=0; 
 t=setInterval(function () {
  if(o >= 0.9){
   clearInterval(t);
   e.style.filter = "alpha(opacity=1)";
  }
   e.style.opacity = o;
   e.style.filter = 'alpha(opacity='+o*100+")";
   o+=0.05;
 }, 25);
}

#btn {
  color: Black;
  width: 100px;
  border: 1px solid black;
}

<button id="btn"><p>hello</p></button>

使用纯Javascript按钮文本转换

2 个答案: