纯Javascript的按钮文本转换

我有一个用纯javascript制作的淡入函数，如图所示

当然，这并没有像预期的那样有效，但我希望能够实现一种行为，即在更改文本时，只会触发文本的淡入过渡，而不会触发整个按钮

---

有没有办法做到这一点？

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

---

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

---

因为您使用的是firstChild，所以我假设您的文本在button元素的子元素中，如果是这样的话，这将起作用

单击底部的蓝色“RunCodeSnippet”按钮查看它的运行情况

btn.addEventListener（'click'，function（）{fadeOut（this.firstChild，newText）}）；
var newText=“世界！”；
功能衰减（e，nT）{
o=1；
t=设置间隔（函数（）{
如果（o=0.9）{
净间隔（t）；
e、 style.filter=“alpha（不透明度=1）”；
}
e、 style.opacity=o；
e、 style.filter='alpha（不透明度='+o*100+”）；
o+=0.05；
}, 25);
}

#btn{
颜色：黑色；
宽度：100px；
边框：1px纯黑；
}

---

您好

既然您使用的是firstChild，我假设您的文本在button元素的子元素中，如果是这样，这将起作用

单击底部的蓝色“RunCodeSnippet”按钮查看它的运行情况

btn.addEventListener（'click'，function（）{fadeOut（this.firstChild，newText）}）；
var newText=“世界！”；
功能衰减（e，nT）{
o=1；
t=设置间隔（函数（）{
如果（o=0.9）{
净间隔（t）；
e、 style.filter=“alpha（不透明度=1）”；
}
e、 style.opacity=o；
e、 style.filter='alpha（不透明度='+o*100+”）；
o+=0.05；
}, 25);
}

#btn{
颜色：黑色；
宽度：100px；
边框：1px纯黑；
}

---

您好

您的代码就在那里，什么不起作用？实际上我想用淡入过渡来更改文本，但不知道如何更改。我正在更新我的提问。检查我的答案，如果它有效，你可以接受你的代码就在那里，什么不起作用？实际上我想用淡入过渡来更改文本，但不知道如何更改。我正在更新我的问题。检查我的答案，如果它有效，你可以接受

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