纯 Javascript 的按钮文本转换答案

【问题标题】：Button text transition with pure Javascript纯 Javascript 的按钮文本转换
【发布时间】：2016-12-26 04:55:22
【问题描述】：

正如site 所示，我有一个使用纯 javascript 制作的淡入淡出功能。

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);

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

有没有办法做到这一点？

【问题讨论】：

你的代码就在那里，什么不工作？
其实我想用淡入淡出来改变文本，不知道怎么做。我现在正在更新我的问题。
检查我的回答，如果可行，您可以接受

标签： javascript transition

【解决方案1】：

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

单击底部的蓝色“运行代码 sn-p”按钮以查看它的运行情况。

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;
}

&lt;button id="btn"&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/button&gt;

【讨论】：

【解决方案2】：

要更改文本颜色，使用此功能，您可以使用 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

【讨论】：