阅读更多 link 纯 JavaScript

Question

我正在尝试创建一个简单的阅读更多示例。它由一个段落和一个按钮组成，其中一半段落包含在最初设置为隐藏的 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），您可以使用 classes 和转换来实现。

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

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

确保元素到达 DOM 时具有 out class，然后当您准备淡入时，将其替换为 in class 浏览器将为您处理动画。

Answer 2

一种方法是使用 CSS3 transition 来过渡元素的不透明度。

在下面的示例中，单击按钮时 class 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);
   })
}

阅读更多 link 纯 JavaScript

Read more link with pure JavaScript

html

javascript

css

fadein