Question

我在页面上设置Counter并需要它从特定值开始然后倒计时，但FlipClock.js坚持做一个初始动画，似乎每当数字以{开头时} {1}}，它以0开头，转而翻到9，在我的背景下看起来很愚蠢：

例如，执行此操作时：

它最初显示为clock = new FlipClock($('.clock'), 20, { clockFace: 'Counter' });，然后翻到19，因为我打算将其计算下来，看起来很奇怪。然后在视觉上：

19,20,19,18,17,16，......

哪个是不和谐的。看起来它会计数，而不是倒计时。有没有办法让它不那样做？

示例：

注意，这是库的旧版本（0.7.8）而不是最新版本（0.8.0），它的行为略有不同。它不会从19变为20，而是从20变为20，这仍然看起来很奇怪，而且在这个版本中动画看起来更糟糕，但它证明了这个问题：

＆＃13;

clock = new FlipClock($('.clock'), 20, {
  clockFace: 'Counter',
  countdown: true
});

＆＃13;

Answer 1

所以我解决这个问题的方法是在div元素上设置一个类：

.wrapTimer {
    height: 0px;
    overflow:hidden;
}

然后只有当我准备好让时钟开始倒计时时，我才会移除类，导致计时器显示已经显示20.只是隐藏和显示元素不起作用，因为它不会动画直到它可见

这至少在Chrome中起作用，YMMV。

Answer 2

http://flipclockjs.com/faces/counter说你需要减少自己

var clock = new FlipClock($('.clock'), 20, {
  clockFace: 'Counter'
});
setTimeout(function() {
  $(".wrap").show();
  setInterval(function() {
    clock.decrement();
  }, 1000);
},1000);

.wrap { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<br/>
<div class="wrap">
  <div class="clock"></div>
</div>

设置或禁用初始动画

2 个答案: