0

我在Counter页面上设置 a 并需要它以特定值开始然后倒计时，但 FlipClock.js 坚持做一个初始动画，似乎每当一个数字以 a 开头时0，它就会以 a 开头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>

4

2 回答 2

1

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

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

然后，只有当我准备好让时钟开始倒计时时，我才会删除导致计时器显示已显示 20 的类。简单地隐藏和显示元素是行不通的，因为它在可见之前不会动画。

这至少在 Chrome 中有效，YMMV。

于 2018-01-16T16:44:14.357 回答
0

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>

于 2018-01-16T15:29:28.220 回答