带有纯 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

要更改文本颜色，使用此函数，您可以使用 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，我假设您的文本位于按钮元素的子元素内，如果是这样的话，这将起作用。

点击底部的蓝色 "run code snippet" 按钮查看实际效果。

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 的按钮文本过渡

Button text transition with pure Javascript

javascript

transition