Question

我正在使用http://github.hubspot.com/odometer/的odometer.js。有没有办法设置odometer.js bia javascript的持续时间（例如里程表从值0到47运行需要10秒才能完成）？我发现了这个问题https://github.com/HubSpot/odometer/issues/91，有人说我需要在2个地方改变（其中一个是css，对我来说，css一个工作）。 css就像这样：

.odometer.odometer-animating-up, .odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
      -webkit-transition-duration: 10s !important;
      -moz-transition-duration: 10s !important;
      -ms-transition-duration: 10s !important;
      -o-transition-duration: 10s !important;
       transition-duration: 10s !important;
}

}

但在我的情况下，我想用javascript，css设置它。我尝试使用这样的jquery：

$(element).css( 'transitionDelay' : duration+'s')

但没有工作。使用文档中的那个也没有做任何事情：

window.odometerOptions = {
    auto: false, // Don't automatically initialize everything with class 'odometer'
    selector: '.my-numbers', // Change the selector used to automatically find things to be animated
    format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
    duration: 3000, // Change how long the javascript expects the CSS animation to take
    theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
    animation: 'count' // Count is a simpler animation method which just increments the value,
                 // use it when you're looking for something more subtle.
};

任何解决方案？

更新：

这是小提琴。请注意，我仍然使用css来控制持续时间

http://jsfiddle.net/mtamwd6w/

Answer 1

这确实很老，但是对于那些正在寻找答案的人来说，文档中的方法确实有效，但是您必须在之前设置它，然后才能加载CDN odometer.js文件：

window.odometerOptions = {
    auto: false, // Don't automatically initialize everything with class 'odometer'
    selector: '.my-numbers', // Change the selector used to automatically find things to be animated
    format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
    duration: 3000, // Change how long the javascript expects the CSS animation to take
    theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
    animation: 'count' // Count is a simpler animation method which just increments the value,
                 // use it when you're looking for something more subtle.
};

里程表通过javascript设置持续时间

1 个答案: