純粋なJavascriptを使ったボタンテキストの遷移

Question

純粋なjavascriptで作成されたフェードインを持っています。これはsiteです。もちろん

var firstChild = document.getElementById('my-button').firstChild; 
firstChild.data = 'Another text'; 
fadeIn(firstChild); 

この期待通りに動作しますが、私はその動作を実現するために何かをしたかったしていない：私は必要なもの

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

のようなもの、ボタンのテキストの変更でこの移行を適用することです変更テキストでは、フェードイントランジションがテキストにのみトリガーされ、ボタン全体にはトリガーされません。

これを達成する方法はありますか？

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>

Answer 2

この機能を使用してテキストの色を変更するには、RGBAを使用して色を設定します.Aはアルファチャンネルを表します。

ので、このような何か：

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