设置或禁用初始动画

Question

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

例如，当您这样做时：

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

它最初会显示为19，然后向上翻转为20，因为我打算倒数，所以看起来很奇怪。从视觉上看，它是：

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

这很刺耳。看起来要往上数，反倒是往下数。有没有办法让它不那样做？

示例：

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

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

<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>
<div class="clock"></div>

Answer 1

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

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>

Answer 2

所以我绕过这个问题的老办法是在 div 元素上设置一个 class：

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

然后只有当我准备好让时钟开始倒计时时，我才删除 class 导致计时器出现已经显示 20。简单地隐藏和显示元素不起作用，因为它赢了在它可见之前不要设置动画。

这至少在 Chrome 有效，YMMV。

设置或禁用初始动画

Setting or disabling initial animation

javascript

flipclock