CSS 动画冻结

Question

等待我的角度应用程序通过ajax加载所需的所有内容，我在较暗的层上显示了一个加载器，该层位于内容之上。

我正在使用这个SVG，其中包括一个animateTransform：

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#fff" stop-opacity="0" offset="0%"/><stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /></path><circle fill="#fff" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /></circle></g></g></svg>

ajax 调用为 4，在某些时候加载程序冻结，调用完成后动画将再次启动。

这是角度部分：

<script type="text/javascript">
var myApp = angular
.module('appName', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
}
.service('dataService', function($http) {
function getInfos() {
return $http.get(currentUrl + '/infos');
}
function getCountries() {
return $http.get(currentUrl + '/countries');
}
function getCatgeories() {
return $http.get(currentUrl + '/categories');
}
function getPrices() {
return $http.get(currentUrl + '/prices');
}
return {
getInfos: getInfos,
getCountries: getCountries,
getCatgeories: getCatgeories,
getPrices: getPrices
};
})
.controller('appNameController', function($scope, dataService) {
$scope._loading = {
start: function() {
if($('.loader').hasClass('off')){
$('.loader').removeClass('off');
}
},
stop: function() {
if(!$('.loader').hasClass('off')){
$('.loader').addClass('off');
}
}
};
$scope._loading.start();
$scope.checkPageLoader = function() {
if($scope.hidePageLoader == 4) {
$('#loaderText').html('<span>App is Ready!</span>');
$scope._loading.stop();
}
};
$scope.hidePageLoader = 0;
$scope.getInfos = function() {
dataService.getInfos().then(function(res) {
$scope.infos = res.data;
$scope.hidePageLoader += 1;
$('#loaderText').append('<span><i class="icon-check"></i>Infos</span>');
$scope.checkPageLoader();
});
};
dataService.getCatgeories().then(function(res) {
$scope.categories = res.data;
$scope.hidePageLoader += 1;
$('#loaderText').append('<span><i class="icon-check"></i>Categories</span>');
$scope.checkPageLoader();
});
dataService.getPrices().then(function(res) {
$scope.prices = res.data;
$scope.hidePageLoader += 1;
$('#loaderText').append('<span><i class="icon-check"></i>Prices</span>');
$scope.checkPageLoader();
});
$scope.getCountries = function() {
dataService.getCountries().then(function(res) {
$scope.countries = res.data;
$scope.hidePageLoader += 1;
$('#loaderText').append('<span><i class="icon-check"></i>Countries</span>');
$scope.checkPageLoader();
});
};
angular.element(document).ready(function () {
$scope._loading.start();
$scope.getInfos();
$scope.getCountries();
/* $scope.priceValues(); */
});
});
</script>

知道为什么会这样吗？

Answer 1

我最终从SVG的嵌入式动画转移到CSS动画，总是在SVG上。

SVG 代码现在为：

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#fff" stop-opacity="0" offset="0%"/><stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"></path><circle fill="#fff" cx="36" cy="18" r="1"></circle></g></g></svg>

这是复制嵌入动画(animateTransform(的CSS代码：

#pageLoader {
animation: spin 1s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

这样，动画是平滑的，并且在 ajax 调用期间不会冻结。

希望这会帮助某人。

Answer 2

你的代码不正确：priceValues不存在

尝试等待所有承诺$q.all：

.controller('appNameController', function($scope, $q, dataService) {
$scope._loading = {
start: function() {
if($('.loader').hasClass('off')){
$('.loader').removeClass('off');
}
},
stop: function() {
if(!$('.loader').hasClass('off')){
$('.loader').addClass('off');
}
}
};
$scope.getInfos = function() {
return dataService.getInfos().then(function(res) {
$scope.infos = res.data;
});
};
$scope.getCatgeories= function() {
return dataService.getCatgeories().then(function(res) {
$scope.categories = res.data;
});
};
$scope.getPrices= function() {
return dataService.getPrices().then(function(res) {
$scope.prices = res.data;
});
};
$scope.getCountries = function() {
return dataService.getCountries().then(function(res) {
$scope.countries = res.data;
});
};
$scope._loading.start();
$q.all([
$scope.getInfos(),
$scope.getPrices(),
$scope.getCountries()
]).then(function() {
$('#loaderText').html('<span>App is Ready!</span>');
$scope._loading.stop();
});
});