Question

这是一个简单的显示文字动画代码。

我需要使用不同的字体大小，这导致文本在不同的垂直位置结束（请运行代码段以了解我的意思）。

问题是我想使动画文本垂直垂直对齐其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 }
}

<div class = "container">
 <p id="textId" class="textClass"></p>
</div>

我没有成功使用它：

transition: 200ms transform;
transform: translateY(-50%);

也使用此：

@-webkit-keyframes Show {
  from { opacity: 0; top: 0% }
  to   { opacity: 1; top: 50% }
}

Answer 1

我想我明白了

@-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，但是元素已经使用它了。

Answer 2

使容器相对放置，这将其声明为绝对放置元素的容器。
使元素本身绝对定位。
将其放在容器的中间，并选择“顶部：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
  }
}

<div class="container">
  <p id="textId" class="textClass"></p>
</div>

Answer 3

我认为您只需要使用以下CSS更新此（.textClass）类，这将使文本在容器内垂直居中。我希望这能解决您的问题。

.textClass {
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
    left: 0.5vw;
    opacity: 0;
    margin: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

将关键帧动画文本与容器中心对齐

3 个答案: