js控制keyframes

系统管理员 2022-05-27 02:44 256阅读 0赞

createKeyFramesStyleSheetRules() {  //创建一个单独的css文件存放动画
                    let style = null,
                        sheet = null,
                        token = null,
                        dist  = null,
                        len   = null,
                        rules = null;
                    len = this.loopSlideObjs.length-1;
                    //计算移动到最后一张图片需要的距离 
                    dist = this.loopContainer.totalHeight - this.loopSlideObjs[len].height;
                    // 创建css文件
                    style = document.createElement('style');
                    style.setAttribute('type', 'text/css');
                    document.head.appendChild(style);
                    // 判断是否是webkit浏览器内核
                    token = window.WebKitCSSKeyframesRule? '-webkit-':'';
                    // 添加keyframes动画的样式
                    rules = '@' + token + 'keyframes imagesLoopMove{from{transform: translate3d(0,0px,0);}to{transform: translate3d(0,-' + dist + 'px,0);}}';
                    sheet = style.sheet;
                    sheet.insertRule(rules, 0);
                    // 给轮播图片添加动态的样式
                    rules = '.loop-animate{animation: imagesLoopMove ' + 200 + 'ms linear 0ms infinite;}';
                    sheet.insertRule(rules, 1);
                    this.animateStyle = style;
                    this.cssRule = sheet.cssRules[1];
                    this.animateTimeCurve();
                    console.group('function createKeyFramesStyleSheetRules');
                    console.log('dist:', dist);
                    console.log('style:', style);
                    console.log('sheet:', sheet);
                    console.log('token:', token);
                    console.log('cssRule:', this.cssRule);
                    console.groupEnd('End');
                    len   = null;
                    dist  = null;
                    style = null;
                    sheet = null;
                    token = null;
                    rules = null;
                }

注意，如果它报DOMExpersion错误，那么就是你的cssRules书写错误，例如@keyframes缺少名字等等