Question

我正在用javascript创建一个关键帧，因为我想知道一个特定元素的宽度，以便使用它来应用动画样式。

以下是代码：

var animation = false,
    animationstring = 'animation',
    prefix = '',
    domPrefixes = 'Webkit Moz O ms'.split(' '),
    pfx  = '',
    elm = document.querySelector('.marquee');

// Checks if the animation implementation is unprefixed
if( elm.style.animationName ) { animation = true; }

// Apply correct prefixes if the animation implementation has prefixes
if( animation === false ) {
    for( var i = 0; i < domPrefixes.length; i++ ) {
        if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
            pfx = domPrefixes[ i ];
            animationstring = pfx + 'Animation';
            prefix = '-' + pfx.toLowerCase() + '-';
            animation = true;
            break;
        }
    }
}

elm.style[ animationstring ] = 'marquee 20s linear infinite';
var keyframes = '@' + prefix + 'keyframes marquee { '+
    '0% { ' + prefix + 'transform: translateX(100%);}'+
    '100% { ' + prefix + 'transform: translateX(-' + elm.scrollWidth + 'px);}'+
    '}';

document.styleSheets[0].insertRule( keyframes, 0 );

http://jsfiddle.net/69PXa/

我的问题（我认为）在第27行，我将elm.scrollWidth作为translateX的值。这显然打破了Chrome中的关键帧，而它在Firefox中应该可以正常工作。如果我只是使用固定数字，动画就可以工作。

有没有办法解决这个问题？

Answer 1

在定义实际关键帧后，您必须将CSS应用于.marquee。现在，您正在告诉浏览器使用不存在的关键帧进行动画尚未。

JSFiddle

Answer 2

也许这样：scrollWidth/scrollHeight give invalid dimensions

或者：Is "ScrollWidth" property of a span not working on Chrome?

可以帮助你; - ）

问候。

使用javascript注入的CSS3关键帧不适用于Chrome

2 个答案: