我制作了一些包含文字动画的网站。
为了实现它,我使用带有关键帧的CSS3动画。
我也使用Promise链接结果动画。
首先,请看下面我使用的资源。
const intro1 = document.getElementsByClassName('intro1')[0];
const intro2 = document.getElementsByClassName('intro2')[0];
const intro3 = document.getElementsByClassName('intro3')[0];
const intro4 = document.getElementsByClassName('intro4')[0];
const sleep = ms => new Promise(res => setTimeout(res, ms));
async function intro() {
// INTRO 1
await sleep(2500);
await intro1.classList.remove('fade-in');
await intro1.classList.add('fade-out');
// INTRO2
intro2.classList.add('fade-in');
await sleep(2000);
await intro2.classList.add('fade-out');
await intro2.classList.remove('fade-in');
// INTRO 3
intro3.classList.add('fade-in');
await sleep(2500);
await intro3.classList.add('fade-out');
await intro3.classList.remove('fade-in');
// INTRO 4
intro4.classList.add('fade-in');
await sleep(2500);
await intro4.classList.add('fade-out');
await intro4.classList.remove('fade-in');
}
intro();
body {
margin: 0;
padding: 0;
}
section {
display: flex;
justify-content: center;
align-items: center;
background-color: aliceblue;
width: 100%;
height: 100%;
font-size: 2rem;
font-weight: 100;
}
span {
text-align: center;
position: absolute;
}
.intro2, .intro3, .intro4 {
display: none;
}
.intro2, .intro3, .intro4 {
text-align: center;
}
/* Intro animation */
.fade-in {
display: inline-block;
overflow: hidden;
white-space: nowrap;
animation: fadeIn 4s forwards;
}
.fade-out {
animation: fadeOut 1s forwards;
}
@keyframes fadeIn {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
<main>
<section>
<span class="intro1 fade-in">TEST TEST TEST TEST TEST</span>
<div class="intro2">
<p>INTRO2</p>
</div>
<div class="intro3">
<p>INTRO3</p>
</div>
<div class="intro4">
<p>INTRO4 TITLE</p>
<p>INTRO5 SUBJECT ABCDEFghI</p>
</div>
</section>
</main>
如您所知,我将所有intro
链接到结果游戏。
在介绍2淡出之前,效果很好。
但是intro2
,intro3
,intro4
的淡出功能无效。
有什么解决办法吗?
谢谢。
答案 0 :(得分:3)
在intro2 intro3和intro 4上,它们设置为display:none
时不起作用
如果其中包含类淡入淡出,则将有display:inline-block
。并随着班级淡出而再次拥有display: none
。因此动画会发生,但您不会看到它。
对此的一种解决方法是将display:inline-block
添加到类淡出并稍后删除类。
修复:http://jsfiddle.net/4t3exLya/20/
编辑:我还为课程淡出添加了text-align: center;
和position: absolute;
。