次のコードは、Chrome だけでなく Firefox ('transitionend' を使用) でも動作に一貫性がありません。機能slogan_fade_next
はただconsole.log('end');
です。クラス名は常に最初のスパン要素に適用されますが、それ以降は、更新ボタンをクリックしたり、再読み込みしたり、その他の何かをクリックしたときに失敗します。
slogan-fadein
適用先のクラスはslogan[]
要素の不透明度を 0 から 1 に変更しますが、コールバック関数fade_setup
は一貫して呼び出されません。
function fade_setup(){
var el = document.getElementsByClassName('slogan')[0];
el = el.getElementsByTagName('span');
for(var i=0;el[i];i++){
el[i].addEventListener('webkitTransitionEnd',slogan_fade_next,false);
}
el[0].className='slogan-fadein';
}
document.addEventListener('DOMContentLoaded', fade_setup);