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);}

转载于:https://www.cnblogs.com/wyyl/p/9252726.html

相关资源：HTML5 JavaScript动画基础 源码