0

我正在使用来自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/

4

1 回答 1

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.
};
于 2020-03-23T19:21:41.713 回答