Подробнее ссылка на чистый JavaScript

Question

Я пытаюсь создать простой пример Read More. Он состоит из абзаца и кнопки с половиной параграфа, заключенного в тег span, который изначально установлен в скрытое. Когда пользователь нажимает кнопку «Читать дальше», появляется скрытый диапазон. У меня есть рабочий код, но я просто хочу сделать так, как JQuery, но с чистым Javascript. Кто-нибудь, пожалуйста, помогите.

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 = 0; 

Вам нужно постепенно переходить непрозрачность здесь.

span.style.opacity = 1; 

Вы должны будете использовать асинхронную конструкцию (setTimeout/setInterval/requestAnimationFrame) для перебора, так как синхронный один (while/for/for-in/forEach) будет блокировать основной поток, предотвращая браузер от действительности рендеринг элемента с обновленной непрозрачностью.

function fadeIn(element) { 

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

    transition(); 
} 

В качестве альтернативы, если вы счастливы использовать CSS (а не чисто JS), вы можете сделать это с помощью классов и переходов.

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

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

Убедитесь, что элемент имеет out класс, когда он прибыл в DOM, а затем, когда вы будете готовы, чтобы исчезнуть его, поменять его на in класса и браузер будет обрабатывать анимацию для вас.

Answer 2

Один из подходов состоит в использовании CSS3 transition для перехода к непрозрачности элемента.

В приведенном ниже примере класс fade-in добавляется к дочернему элементу 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); 
    }) 
}