js动画

addKeyFrames('-' + heightOrWidth + 'px',direction) // 设置keyframes

addKeyFrames(num,direction) {
    let style = document.createElement('style');
    let {speed,scrollId} = this.props
    style.type = 'text/css';
    let keyFrames = '\
        @-webkit-keyframes '+scrollId + ' {\
            0% {\
                -webkit-transform: translate3d(0, 0, 0);\
                transform: translate3d(0, 0, 0);\
            }\
            100% {\
                -webkit-transform: translate3d(A_DYNAMIC_VALUE);\
                transform: translate3d(A_DYNAMIC_VALUE);\
            }\
        }\
        @keyframes '+scrollId + ' {\
            0% {\
                -webkit-transform: translate3d(0, 0, 0);\
                transform: translate3d(0, 0, 0);\
            }\
            100% {\
                -webkit-transform: translate3d( A_DYNAMIC_VALUE);\
                transform: translate3d(A_DYNAMIC_VALUE);\
            }\
        }\
        .scroll-list #'+scrollId + '{\
            animation: A_SPEED '+scrollId + ' linear infinite normal;\
            position: relative;\
        }';
    let NUM_DYNAMIC = direction === 'x'?num + ',0,0':'0,'+num+',0'
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, NUM_DYNAMIC).replace(/A_SPEED/g, `${speed}s`);
    document.getElementsByTagName('head')[0].appendChild(style);
}