Leggi altro link con puro JavaScript

Question

Sto cercando di creare un semplice esempio Leggi altro. Consiste in un paragrafo e un pulsante con metà del paragrafo racchiuso in un tag span inizialmente impostato come nascosto. Quando l'utente fa clic sul pulsante Leggi altro, l'intervallo nascosto viene visualizzato. Ho il codice funzionante ma voglio solo fare una dissolvenza in effetti come JQuery ma con Javascript puro. Qualcuno per favore aiuto.

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

partire qui

span.style.opacity = 0; 

Avrai bisogno di passare gradualmente l'opacità a qui.

span.style.opacity = 1; 

Sarà necessario utilizzare un costrutto asincrono (setTimeout/setInterval/requestAnimationFrame) per iterazione, perché uno sincrono (while/for/for-in/forEach) blocca il thread principale, impedendo al browser di realtà rendere l'elemento con l'opacità aggiornata.

function fadeIn(element) { 

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

    transition(); 
} 

In alternativa, se sei felice di usare i CSS (anziché pura JS) si può fare questo con le classi e le transizioni.

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

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

Assicurarsi che l'elemento ha la classe out quando arriva nel DOM, poi quando si è pronti a svanire in, scambiarlo per la classe in e il browser gestirà l'animazione per voi.

Answer 2

Un approccio consiste nell'utilizzare un CSS3 transition per passare l'opacità dell'elemento.

Nell'esempio seguente, la classe fade-in viene aggiunta all'elemento figlio span quando si fa clic sul pulsante.

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>

Se si desidera un approccio che funziona per più elementi, si potrebbe anche utilizzare il seguente:

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