javascript - CSS动画卡住

Question

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

我正在使用这个包含 animateTransform 的 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"><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 次，加载器在某个时候卡住，调用完成后动画再次开始。

这是 Angular 部分:

<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>

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

#pageLoader {
    animation: spin 1s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

这样动画很流畅，在 ajax 调用期间不会卡住。

希望这会对某人有所帮助。