javascript - 使用纯 Javascript 实现按钮文本转换

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

由于您使用的是firstChild，我假设您的文本位于按钮元素的子元素内，如果是这种情况，这将起作用。

单击底部的蓝色“运行代码片段”按钮即可查看其运行情况。

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>