続きを読む純粋なJavaScriptを使用したリンク

Question

私は簡単なRead Moreの例を作成しようとしています。段落と段落の半分がスパンタグで囲まれたボタンで構成され、最初は非表示に設定されています。ユーザがRead Moreボタンをクリックすると、隠れた範囲が表示されます。私は作業コードを持っていますが、JQueryのようにフェードアウトしたいだけで、純粋なJavascriptを使っています。誰でも助けてください。ここ

span.style.opacity = 0; 

あなたは徐々にここに不透明度を移行する必要がありますを開始

var span = document.getElementsByTagName('span')[0]; 
 
var hideshow = document.getElementById('hideshow'); 
 

 
span.style.display = 'none'; 
 

 
hideshow.onclick = function() { 
 
    span.style.display = 'block'; 
 
};

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p> 
 

 
<button id="hideshow">Read More</button>

Answer 1

。

span.style.opacity = 1; 

同期1（while/for/for-in/forEach）は、メインスレッドをブロックしますので、あなたが実際のブラウザを防止、反復のための非同期構築物（setTimeout/setInterval/​​）を使用する必要があります更新された不透明度で要素をレンダリングします。

function fadeIn(element) { 

    function transition() { 
    if(element.style.opacity < 1) { 
     requestAnimationFrame(transition); 
     element.style.opacity = Number(element.style.opacity) + 0.05; 
    } 
    } 

    transition(); 
} 

また、純粋なJSではなくCSSを使用しても構わない場合は、クラスとトランジションでこれを行うことができます。

.out { 
    opacity: 0; 
    transition-duration: 0.5s; 
} 

.in { 
    opacity: 1; 
    transition-duration: 0.5s; 
} 

要素は、それがDOMに到着したとき、あなたがそれをフェードインする準備ができたら、その後、inクラスのためにそれを交換outクラスを持っており、ブラウザがあなたのためのアニメーションを処理することを確認します。

Answer 2

1つの方法は、要素の不透明度を遷移させるためにCSS3 transitionを使用することです。

ボタンをクリックすると、下の例では、というクラスが子のspan要素に追加されています。

var button = document.querySelector('.read-more'); 
 

 
button.addEventListener('click', function(event) { 
 
    var span = event.target.previousElementSibling.querySelector('span'); 
 
    span.classList.add('fade-in'); 
 
});

.show-more span { 
 
    display: inline-block; 
 
    height: 0; 
 
    overflow: hidden; 
 
    transition: opacity 2s; 
 
    opacity: 0; 
 
} 
 
.show-more span.fade-in { 
 
    height: auto; 
 
    opacity: 1; 
 
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p> 
 
<button class="read-more">Read More</button>

あなたが複数の要素のために働くアプローチをしたい場合は、以下を使用することができます。

var buttons = document.querySelectorAll('.read-more'); 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click', function(event) { 
 
    var span = event.target.previousElementSibling.querySelector('span'); 
 
    span.classList.add('fade-in'); 
 
    }); 
 
}

.show-more span { 
 
    display: inline-block; 
 
    height: 0; 
 
    overflow: hidden; 
 
    transition: opacity 2s; 
 
    opacity: 0; 
 
} 
 
.show-more span.fade-in { 
 
    height: auto; 
 
    opacity: 1; 
 
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p> 
 
<button class="read-more">Read More</button> 
 

 
<p class="show-more">Another shorter paragraph. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p> 
 
<button class="read-more">Read More</button>

Answer 3

var duration = 2000; // msecs 

document.getElementById('hideshow').onclick =() => { 
    requestAnimationFrame((start_time) => { 
     var anim = (time) => { 
     var p = (time - start_time)/duration; 
     (p < 1) && requestAnimationFrame(anim); 
     span.style.opacity = 1 - p; 
     } 
     anim(start_time); 
    }) 
}