Question

因此，基本上，我有这种键入文本的动画，其中一些javascript每3秒更改一次消息，并且在我的jquery代码更改消息之前，使用css关键帧来“重新键入”文本。当前它可以正常工作，但是宽度是静态的，因此对于较小的世界，宽度仍然设置为7ch，最终看起来很傻。我尝试了一些其他解决方法，例如将width设置为auto，将div设置为，然后将width设置为继承，但是所有想法都失败了。

a = np.zeros((11, 11), dtype=np.uint) 
res = triangular_slicing(a, (1,1), (6,3) , (6,9) ) 

[[0 0 0 0 0 0 0 0 0 0 0]
 [0 1 0 0 0 0 0 0 0 0 0]
 [0 0 1 0 0 0 0 0 0 0 0]
 [0 0 1 1 1 0 0 0 0 0 0]
 [0 0 0 1 1 1 0 0 0 0 0]
 [0 0 0 1 1 1 1 1 0 0 0]
 [0 0 0 1 1 1 1 1 1 1 0]
 [0 0 0 0 0 0 0 0 0 0 0]
 [0 0 0 0 0 0 0 0 0 0 0]
 [0 0 0 0 0 0 0 0 0 0 0]
 [0 0 0 0 0 0 0 0 0 0 0]]

a = np.zeros((11, 11), dtype=np.uint) 
res = triangular_slicing(a, (0,5), (8,2) , (8,8) )  

[[0 0 0 0 0 1 0 0 0 0 0]
 [0 0 0 0 0 1 0 0 0 0 0]
 [0 0 0 0 0 1 0 0 0 0 0]
 [0 0 0 0 1 1 1 0 0 0 0]
 [0 0 0 0 1 1 1 0 0 0 0]
 [0 0 0 0 1 1 1 0 0 0 0]
 [0 0 0 1 1 1 1 1 0 0 0]
 [0 0 0 1 1 1 1 1 0 0 0]
 [0 0 1 1 1 1 1 1 1 0 0]
 [0 0 0 0 0 0 0 0 0 0 0]
 [0 0 0 0 0 0 0 0 0 0 0]]

@keyframes terminal {
  0% {width:0}
  20% {width:0}
  50% {width:7ch}
  70% {width:7ch}
  100% {width:0}
}
#terminal-text {
  font-weight: bold;
  margin: 1em 0 .5em 0;
  padding: 0;
  animation: terminal 3s infinite;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  text-align: left;
}

Answer 1

不是对width进行动画处理，而是对max-width进行动画处理：

var i = 0;
words = ['architect.','build.','design.','code.','develop.','innovate.'];
setInterval(function() {
  $("#terminal-text").text(words[i]);
  i++;
  if (i > words.length) {
    i=0;
  }
},3000);

@keyframes terminal {
  0% {max-width:0}
  20% {max-width:0}
  50% {max-width:100%}
  70% {max-width:100%}
  100% {max-width:0}
}
#terminal-text {
  font-weight: bold;
  margin: 1em 0 .5em 0;
  padding: 0;
  animation: terminal 3s infinite;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center style="display: flex;">
    <h1 style="padding-right:20px;">We</h1>
    <h1 id="terminal-text">innovate.</h1>
</center>

键入文字动画无法控制宽度

1 个答案: