css - 去除网页上冒号符号的跳跃

Question

我有一个网页，上面有时间 12:45。用户可以点击那个时间来隐藏它(第二次点击会再次显示)。然后隐藏时间，显示为--:--。

我想防止用户点击时元素跳转。

没有水平运动，但有垂直运动。当时间变为减号(和减号)时，冒号移动。

这是一个显示跳跃冒号的动画 gif:

这是一个 jsfiddle，其中包含显示问题的代码 https://jsfiddle.net/a7z63nkp/5/

如何更改代码以使冒号静态化？

Answer 1

你是否期待这样的:

var i = 0;
var intervalID = setInterval(function() {
  if (i === 0) {
    // here is 'minus' ('−') chars, not the 'dash' ('-') chars
    $('.mins').text('−−');
    $('.secs').text('−−');
    i = 1;
  } else {
    i = 0;
      $('.mins').text('12');
      $('.secs').text('45');
      }
}, 300);

.main{
  display:flex;
}
.mins, .secs {
  font-size: 10rem;
  width:200px;
  font-variant-numeric: tabular-nums;
  font-family: BlinkMacSystemFont;
}
.colon{
    font-size: 10rem;
    width:60px;
}

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="main">
 <span class="mins">12</span>
<span class="colon">:</span>
<span class="secs">45</span>
</div>