我正在尝试创建一个简单的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>
解决方法
从这里开始
span.style.opacity = 0;
您需要逐渐将不透明度转换为此处.
span.style.opacity = 1;
您需要使用异步构造(setTimeout / setInterval / requestAnimationFrame)进行迭代,因为同步构造(而/ 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; }
确保元素在到达DOM时具有out类,然后当您准备淡入它时,将其交换为类,浏览器将为您处理动画.
原文地址:https://www.jb51.cc/js/150219.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。