需求描述
将一段话分成三段,第一段显示后隐藏后接着第二段显示隐藏接着第三段,第一段…一直循环,要求每次显示隐藏时文字要淡入淡出。参考:https://www.cnblogs.com/wangshengli520/p/9899703.html
思路
将淡入淡出的动画效果写在一个类中,然后通过js添加移除这个类来实现
代码
- CSS代码
@keyframes txt-fade {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 1; /*中间状态 透明度为1*/
}
100% {
opacity: 0; /*结尾状态 透明度为0*/
}
}
.slider_text_one{
opacity: 0;/**设置默认三段都不显示/
}
.fade {
opacity: 0;
animation-name: txt-fade; /*动画名称*/
animation-duration: 3s; /*动画持续时间*/
}
- HTML代码
<div class="slider_text_one txt-one">
<div class="container">
<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
<h2>晨豪是一家致力于通过提供高品质的安全服务,</h2>
<h2>为中国的城市和建筑解决遇到的各种安全问题的高新技术企 业。</h2>
</div>
</div>
</div>
<div class="slider_text_one txt-two">
<div class="container">
<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
<h2>我们开发了适用于国家级的技术领先的建筑安全体系,</h2>
<h2>全方位保护国家、城市和建筑的安全。</h2>
</div>
</div>
</div>
<div class="slider_text_one txt-three">
<div class="container">
<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
<h2>帮助建筑与城市运营的管理者挖掘更多的价值,</h2>
<h2>提升安全、提高效率、降低成本、优化管理。</h2>
</div>
</div>
</div>
- JS代码
//获取dom节点
var txtOne=document.querySelector('.txt-one');
var txtTwo=document.querySelector('.txt-two');
var txtThree=document.querySelector('.txt-three');
//页面载入时,给txtOne加入动画,执行一次
txtOne.classList.add('fade');
//监听txt-one动画是否结束
txtOne.addEventListener('animationend',function(){
//动画结束,移除txtOne动画的样式类后,txtOne恢复默认
txtOne.classList.remove('fade');
//给txtTwo加上动画
txtTwo.classList.add('fade');
})
txtTwo.addEventListener('animationend',function(){
//动画结束,移除动画的样式类
txtTwo.classList.remove('fade');
txtThree.classList.add('fade');
})
txtThree.addEventListener('animationend',function(){
//动画结束,移除动画的样式类
txtThree.classList.remove('fade');
txtOne.classList.add('fade');
})
补充
@keyframes、animation和addEventListener会有浏览器兼容问题
效果参考:https://www.bjchenhaokeji.com