时间戳

首页 > 解决方案 > 如何删除以前的

在显示另一个之后

?

javascript - 如何删除以前的

在显示另一个之后

?

问题描述

Javascript/Css3 专家，

我有按顺序显示文本的编码，但是<p>在显示另一个文本时我需要删除以前的文本<p>。

简单来说......我想用即将到来的新文本替换旧显示的文本并按原样显示最终文本。

这是编码：

body {
  background: #000;
  padding-top: 10px;
}
p {
  color: lime;
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  opacity: 0;
  animation: type 4s steps(60, end) forwards;
  -webkit-user-select: none;
  user-select: none;
}
p:nth-child(2) {
  animation-delay: 1s;
}
p:nth-child(3) {
  animation-delay: 2s;
}
p:nth-child(4) {
  animation-delay: 3s;
}
p:nth-child(5) {
  animation-delay: 4s;
}
p:nth-child(6) {
  animation-delay: 5s;
  margin-bottom: 25px;
}
p:nth-child(7) {
  animation-delay: 6s;
}
p:nth-child(7) span:first-child {
  animation-duration: 0.8s;
}
span {
  animation: blink 1.8s infinite 8s;
}
p a {
  color: lime;
  text-decoration: none;
}
@keyframes type {
  0% {
    opacity: 1;
  }
  100% {
    width: 30em;
    opacity: 1;
  }
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
::selection {
  background: black;
}
<p>Text first.</p>
<p>Text 2nd...</p>
<p>Text 3rd...</p>
<p>Text 4th...</p>
<p>Text 5th...</p>
<p>Text 6th...</p>
<p><span>Final/Blinking Line</span>  <span>|</span>
</p>

摘要：当您执行代码时..<p>它一个接一个地显示它可以..但是<p>应该互相替换不显示4行...只有最后一个<p>闪烁行应该显示在最后。

谢谢

标签： javascripthtml

解决方案

这是基于发布的代码的 CSS 版本，用于一些想法：

body {
  background: #000;
  color: white;
  padding-top: 10px;
}
.container {
    position: relative; /* to host absolute child elements */
}
.temporary {
    position: absolute;
    width: 0px;
}

p {
  color: lime;
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: type 1s steps(60, end);
  -webkit-user-select: none;
  user-select: none;
}
p:nth-child(2) {
  animation-delay: 1s;
}
p:nth-child(3) {
  animation-delay: 2s;
}
p:nth-child(4) {
  animation-delay: 3s;
}
p:nth-child(5) {
  animation-delay: 4s;
}
p:nth-child(6) {
  animation-delay: 5s;
}
p:nth-child(7) {
  animation-delay: 6s;
  animation-fill-mode: forwards;
}

span {
  animation: blink 1.8s infinite 8s;
}

p:nth-child(7) span:first-child {
  animation-duration: 0.8s;
}
p a {
  color: lime;
  text-decoration: none;
}
@keyframes type {
  0% {
  }
  30% {
    width: 10em;
  }
  31% {
    width: 30em;  /* provide reading time for longer lines */
  }
  100% {
    width: 30em;
  }
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
::selection {
  background: black;
}
<h3>Demo</h3>
<div class="container">
  <p class="temporary">Text first.</p>
  <p class="temporary">Text 2nd...</p>
  <p class="temporary">Text 3rd...</p>
  <p class="temporary">Text 4th... but this is a fairly long line as well.</p>
  <p class="temporary">Text 5th...</p>
  <p class="temporary">Text 6th...</p>
  <p class="temporary"><span>Final/Blinking Line</span>  <span>|</span></p>
</div>

变化：

  1. 段落使用绝对定位并放置在相对定位的容器中，因此它们占据相同的屏幕区域。这是为了防止不可见的段落影响可见段落的垂直位移。

  2. 动画不影响段落不透明度。动画段落被指定为在动画前后宽度为零。与 结合使用overflow: hidden，这将隐藏默认情况下未设置动画的段落，而不使用opacity或display属性。

  3. 闪烁的段落是唯一一个在动画结束animation-fill-style时forwards防止它缩回到零宽度的段落。

为避免多个段落同时显示，animation-delay段落的时间需要不少于animation-duration单个段落的时间。修改后的 CSS 规则将持续时间减少到 1 秒以匹配段落延迟步骤。但是，为了让更长的线条显示至少十分之七秒，只有宽度扩展的前 30% 会在跳转到全宽之前进行动画处理。为了保持动画简单，或多或少需要一些妥协，但时间和宽度总是可以根据要求而变化。

眨

CRT 文本终端闪烁的模拟可以包括淡出效果，以模拟屏幕荧光粉的持续时间。或许最简单的方法是为动画提供多个关键帧，这些关键帧会opacity根据图形设计上下倾斜。

例如，此图的闪烁率为 1hz，标称占空比为 50%，荧光粉快速衰减 200ms，然后再缓慢衰减 300ms：

.screen {
   font-family: "lucida console", "courier new", monospace;
   color: #0b0;
   background-color: black;
   padding: 1em;
   border-radius: 1em;
   border: thick solid beige;
}

.fadeBlinkText {
   animation-name: fade-blink;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-delay: 2s;
}
.fadeBlinkCursor {
   animation-name: fade-blink;
   animation-duration: 1.5s;
   animation-iteration-count: infinite;
   animation-delay: 2s;
}

@keyframes fade-blink {
   0%    { opacity: 1;}
   20%   { opacity: 0.1;}
   49.9% { opacity: 0.05;}
   50%   { opacity: 1;}
   100%  { opacity: 1;}
}
<div class=screen>
 <p>Start text blinking in 2 seconds, cursor in 2.5 seconds:

 <p><span class="fadeBlinkText">BLINK BLINK</span><span class="fadeBlinkCursor">|</span>
</div>

推荐阅读