Кнопка текстового перехода с чистым 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 я предположу, что ваш текст находится внутри дочернего элемента кнопочного элемента, если это так, то это будет работать.

Нажмите синюю кнопку «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>

Answer 2

Чтобы изменить цвет текста, используя эту функцию, вы можете установить его цвет с помощью RGBA - А обозначает альфа-канал.

Так, что-то вроде этого:

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