欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何使@keyframes里面的属性值为动态添加

程序员文章站 2024-03-24 20:51:16
...
angular.module('analysis.realtime')
    .controller('userActionController', ['$rootScope','$scope', 'realtimeService', function($rootScope,$scope,realtimeService) {
        var mpId = $rootScope.mpId;
        var count = 1;
        $scope.headerInfo = {
            title: '实时用户行为',
            tip: '上一个 5min 区间内, 用户访问网站不同的页面情况'
        };
        realtimeService.getUserBehavior(mpId).then(function(json) {
            $scope.data = json;
            var jsonLength = json.length;
            var topLength = -jsonLength*40+40;
            var liLength=-jsonLength*40;
            $scope.textStyle={
            	'top':liLength+'px',
                'font-size': '12px',
    		'font-family': '微软雅黑',    
    		'padding': '10px',
    		'position': 'relative',
            	'animation': 'slide 1000s linear infinite',
            	'height':'40px'
            };
            var style = document.createElement('style');
			style.type = 'text/css';
			var keyFrames = '\
			@-webkit-keyframes slide{\
    		0% {\
        	top: '+topLength+'px;\
    		}\
    		100% {\
        	top: 40px;\
    		}\
		}';
		style.innerHTML = keyFrames;
		document.getElementsByTagName('head')[0].appendChild(style);
        });