如何禁用FlipClock.js计数器的初始翻转动画？

我之前也踩过这个旧版本的坑！0.7.8的FlipClock确实存在初始化时强制触发翻转动画的bug，尤其是开启countdown时表现得更诡异。这里有几个亲测有效的解决方案：

方法1：初始化后手动修正状态（推荐） #

不用改源码，先以非倒计时模式初始化跳过初始动画，再手动调整组件状态并启动倒计时：

// 先以非倒计时模式初始化，避免初始翻转
let clock = new FlipClock($('.clock'), 20, {
    clockFace: 'Counter',
    countdown: false
});

// 直接修改DOM显示目标数值，跳过动画
$('.flip-clock-digit .inn').text('20');

// 重置组件内部值，保证后续计数逻辑正确
clock.time = 20;
clock.countdown = true;

// 启动倒计时
clock.start();

原理是绕开初始化时的强制动画逻辑，直接把显示内容和组件内部状态同步到目标值，再启动倒计时，完美规避初始翻转问题。

方法2：临时隐藏时钟，初始化完成后再显示 #

通过CSS先隐藏时钟，等组件初始化完成、状态修正后再显示，用户就看不到异常动画了：

.clock {
    display: none;
}

let clock = new FlipClock($('.clock'), 20, {
    clockFace: 'Counter',
    countdown: true,
    // 利用初始化回调修正状态并显示时钟
    init: function() {
        this.time = 20;
        $('.clock').show();
    }
});

如果init回调不生效，也可以用短延迟的setTimeout替代：

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

setTimeout(() => {
    clock.time = 20;
    $('.clock').show();
}, 100);

方法3：修改源码（彻底但不推荐） #

如果上面的方法都不符合需求，可以直接修改flipclock.min.js的源码：找到初始化阶段执行翻转动画的代码（比如类似this.flip(true)的调用），注释掉或者添加判断条件，只在非初始状态下执行动画。不过这种方法的缺点是换CDN或升级版本后会失效，适合固定版本的场景。

内容的提问来源于stack exchange，提问作者Matt Burland