[英]How to animate the text in a for-loop?
I'm trying to create a sidebar animation effect as: 我正在尝试将侧边栏动画效果创建为:
<div class="sidebar-description sidebar-personal-info-section">
A passionate
<span class="changing-keywords" id="change">
<strong>
<b class="hidden">software engineer</b>
<b class="hidden">lifelong learner</b>
<b class="hidden">blogger</b>
<b class="hidden">traveller</b>
</strong>
</span><br>
</div>
I've written the HTML code but issue is that how should I display each text one at a time with small delay with slide-out
animation effect? 我已经编写了HTML代码,但问题是,如何以
slide-out
动画效果一次延迟显示一次每个文本? The loop should work infinite times. 循环应该无限次地工作。
Make it simple by using CSS key-frame animation. 通过使用CSS关键帧动画使其变得简单。
Below is an example. 下面是一个例子。
body{ font-family:calibri; } .codinfox-changing-keywords{ vertical-align:top; overflow:hidden; height:20px; position:relative; display: inline-block; width: 250px; } .hidden{ position:absolute; top: 20px; display:inline-block; width:250px; opacity:0; animation: slideme 8s infinite; } .hidden:nth-child(3){ animation-delay: 2s; } .hidden:nth-child(5){ animation-delay: 4s; } .hidden:nth-child(7){ animation-delay: 6s; } @keyframes slideme { 0% { top: 20px; opacity:0; } 5% { top: 0px; opacity:1; } 10%{ top : 0; opacity:1; } 20%{ opacity:1; } 25% { opacity:0.1; top : 0; } 30% { opacity:0; top: 20px; } }
<div class="codinfox-sidebar-description sidebar-personal-info-section"> A passionate <div class="codinfox-changing-keywords" id="change"> <strong> <b class="hidden">software engineer</b><br/> <b class="hidden">lifelong learner</b><br/> <b class="hidden">blogger</b><br/> <b class="hidden">traveller</b> </strong> </div> </div>
First, you need to work a little bit on your HTML. 首先,您需要对HTML进行一些处理。 The
<strong>
tag shouldn't be used to style elements, not to mention the <b>
tags. <strong>
标签不应用于设置样式,更不用说<b>
标签。 Below is my version of the code. 下面是我的代码版本。 First the HTML:
首先是HTML:
<div class="codinfox-sidebar-description sidebar-personal-info-section">
A passionate
<span class="changing-keyword shown">software engineer</span>
<span class="changing-keyword">lifelong learner</span>
<span class="changing-keyword">blogger</span>
<span class="changing-keyword">traveller</span>
</div>
I took the liberity to change the class names and remove some tags that were, in my opinion, unnecessary here. 我可以自由地更改类名,并删除一些我认为在这里不必要的标记。 Now, JavaScript:
现在,JavaScript:
const changingKeywords = document.querySelectorAll('span.changing-keyword');
const keywordsToggle = setKeywordsToggle(changingKeywords);
function setKeywordsToggle (keywords) {
let index = 0;
return setInterval(() => {
keywords[index].classList.remove('shown');
if (++index >= keywords.length)
index = 0;
keywords[index].classList.add('shown');
}, 2000);
}
Notice that I actually return the setInterval() function and assign it to keywordsToggle variable. 注意,我实际上返回了setInterval()函数,并将其分配给keywordToggle变量。 This way, if I ever want to stop the animation, I can easily do so by running clearInterval() .
这样,如果我想停止动画,可以通过运行clearInterval()轻松地停止动画。 The code toggles through all keywords it finds and assigns the shown class to the element determined by the value of index variable.
该代码在找到的所有关键字之间切换,并将显示的类分配给由index变量的值确定的元素。
Finally, sample CSS: 最后,示例CSS:
.sidebar-personal-info-section {
position: relative;
}
.changing-keyword {
font-weight: bold;
opacity: 0;
transition: opacity 1s, visibility 1s;
visibility: collapse;
position: absolute;
padding-left: .2rem;
}
.shown {
opacity: 1;
visibility: visible;
}
Notice the visibility transition, which actually works as transition delay. 注意可见性过渡,它实际上是过渡延迟。 Other than that, I had to use a position property to make sure that every keyword is positioned near the "passionate" word, otherwise every word would appear in it's original position (I didn't use display:none since it's not animatable).
除此之外,我必须使用position属性来确保每个关键字都位于“热情”字词附近,否则每个字词都将以其原始位置出现(我没有使用display:none,因为它不可设置动画)。
Working example: 工作示例:
const changingKeywords = document.querySelectorAll('span.changing-keyword'); const keywordsToggle = setKeywordsToggle(changingKeywords); function setKeywordsToggle (keywords) { let index = 0; return setInterval(() => { keywords[index].classList.remove('shown'); if (++index >= keywords.length) index = 0; keywords[index].classList.add('shown'); }, 2000); }
.sidebar-personal-info-section { position: relative; } .changing-keyword { font-weight: bold; opacity: 0; transition: opacity 1s, visibility 1s; visibility: collapse; position: absolute; padding-left: .2rem; } .shown { opacity: 1; visibility: visible; }
<div class="codinfox-sidebar-description sidebar-personal-info-section"> A passionate <span class="changing-keyword shown">software engineer</span> <span class="changing-keyword">lifelong learner</span> <span class="changing-keyword">blogger</span> <span class="changing-keyword">traveller</span> </div>
My quick and dirty would look something like this. 我又快又脏的样子会像这样。
// add rotate to Array
Array.prototype.rotate = function(n) {
return this.slice(n, this.length).concat(this.slice(0, n));
}
// setup array
const jobs = ['employee', 'manager'];
// rotate jobs function
const rotateJobs = () => {
document.querySelector('#id').innerHtml = jobs.rotate(1).shift();
}
// set interval
setInterval(rotateJobs, 1000);
The fade in / slide animation should be handled in css transitions. 淡入/滑动动画应在CSS过渡中处理。
This something what I finally figured out! 这件事我终于想通了!
var title = ['software engineer', 'tech blogger', 'traveller', 'lifelong learner'];
var i = 0; // the index of the current item to show
setInterval(function() { // setInterval makes it run repeatedly
document
.getElementById('change')
.innerHTML = title[i++]; // get the item and increment
if (i == title.length) i = 0; // reset to first element if you've reached the end
}, 2000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.