作者：我病态见不得你跟别人恩爱 | 来源：互联网 | 2023-09-14 20:15
这是一个简单的显示文字动画代码。
我需要使用不同的字体大小，这导致文本在不同的垂直位置结束（请运行代码段以了解我的意思）。
问题是我想使动画文本垂直垂直对齐其container的中间，即使将字体大小更改，也要水平对齐其左侧的水平。
如果我从position: absolute中删除了textClass，则文本会在container的中间淡入淡出，但我会失去从下到上的翻译动画！
注意：
我知道使用视口单位的弊端，但我确实需要使用视口单位（vw和vh）或％单位，而且我不允许使用px em等。
let textId = document.getElementById("textId");
// Text with 1vw font size
setTimeout(function(){
//Our Text
let myText = 'First text here';
//Define the font size
textId.style.fOntSize= "1vw";
//append text to the elemnt
textId.innerHTML = `${myText}`;
//animate the text
textId.classList.add("animeShow");
textId.classList.remove("animeHide");
},1000);
// Hide Text by adding `animeHide` class
setTimeout(function(){
textId.classList.remove("animeShow");
textId.classList.add("animeHide");
},4000);
// Text with 3vw font size
setTimeout(function(){
let myText = 'Second text here';
textId.style.fOntSize= "3vw";
textId.innerHTML = `${myText}`;
textId.classList.add("animeShow");
textId.classList.remove("animeHide");
},5000);
.container {
position: absolute;
overflow: hidden;
left: 10vw;
top: 51vh;
height: 26vh;
width: 88vw;
display: flex;
justify-content: center;
align-items: center;
outline: 0.1vw dashed orange;
}
.textClass {
position: absolute;
font-family: 'Open Sans',sans-serif;
font-weight: bold;
color: rgb(128,128,128);
left: 0.5vw;
opacity: 0;
}
.animeShow {
animation: Show 0.3s ease-in-out;
animation-delay: 0.5s;
animation-fill-mode: forwards ;
}
.animeHide {
animation: Hide 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
@-webkit-keyframes Show {
from { opacity: 0; top: 30vh }
to { opacity: 1; top: 0vh }
}
@-webkit-keyframes Hide {
from { opacity: 1; top: 0vh }
to { opacity: 0; top: 30vh }
}
我没有成功使用它：
transition: 200ms transform;
transform: translateY(-50%);
也使用此：
@-webkit-keyframes Show {
from { opacity: 0; top: 0% }
to { opacity: 1; top: 50% }
}
我想我明白了
@-webkit-keyframes Show {
from { opacity: 0; padding-top: 10%; }
to { opacity: 1; padding-top: 0%; }
}
@-webkit-keyframes Hide {
from { opacity: 1; padding-top: 0%; }
to { opacity: 0; padding-top: 10%; }
}
我尝试使用margin-top，但是元素已经使用它了。
,
- 使容器相对放置，这将其声明为绝对放置元素的容器。
- 使元素本身绝对定位。
- 将其放在容器的中间，并选择“顶部：50％”。 （请注意，这里的“ 50％”表示容器高度的50％。）
- 使用平移将元素向上移动自己的高度（“ translate（0，-100％）”中的“ 100％”是指元素本身的高度。）
这会将文本移到靠近容器中间的位置。
使用较高的负值调整-100％，以将元素移至顶部。
但我发现-100％是距离中心最近的东西
let textId = document.getElementById("textId");
// Text with 1vw font size
setTimeout(function() {
//Our Text
let myText = 'First text here';
//Define the font size
textId.style.fOntSize= "1vw";
//append text to the elemnt
textId.innerHTML = `${myText}`;
//animate the text
textId.classList.add("animeShow");
textId.classList.remove("animeHide");
},1000);
// Hide Text by adding `animeHide` class
setTimeout(function() {
textId.classList.remove("animeShow");
textId.classList.add("animeHide");
},4000);
// Text with 3vw font size
setTimeout(function() {
let myText = 'Second text here';
textId.style.fOntSize= "3vw";
textId.innerHTML = `${myText}`;
textId.classList.add("animeShow");
textId.classList.remove("animeHide");
},5000);
.container {
position: relative;
overflow: hidden;
left: 10vw;
top: 51vh;
height: 26vh;
width: 88vw;
display: flex;
justify-content: center;
align-items: center;
outline: 0.1vw dashed orange;
}
.container p {
position: absolute;
font-family: 'Open Sans',sans-serif;
font-weight: bold;
color: rgb(128,128,128);
left: 0.5vw;
opacity: 0;
}
.animeShow {
animation: Show 0.3s ease-in-out;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.animeHide {
animation: Hide 0.3s ease-in-out;
animation-fill-mode: forwards;
}
@-webkit-keyframes Show {
from {
opacity: 0;
top: 30vh;
}
to {
opacity: 1;
top: 50%;
transform: translateY(-100%);
}
}
@-webkit-keyframes Hide {
from {
opacity: 1;
top: 0vh
}
to {
opacity: 0;
top: 30vh
}
}
,
我认为您只需要使用以下CSS更新此（.textClass）类，这将使文本在容器内垂直居中。我希望这能解决您的问题。
.textClass {
position: absolute;
font-family: 'Open Sans',sans-serif;
font-weight: bold;
color: rgb(128,128);
left: 0.5vw;
opacity: 0;
margin: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
京公网安备 11010802041100号