Angular Bootstrap手風琴和ngAnimate，如何防止在初始頁面加載時出現動畫

Question

設置和問題：

我正在使用Angular，angle-bootstrap，angular-animate和angular-ui-router，我想要一個簡單的手風琴。 使手風琴工作並設置動畫非常簡單，但是我想防止動畫在初始頁面加載期間發生。 我注意到在angular-bootstrap演示中不會發生此問題，因此我懷疑angular-ui-router或其他問題可能會干擾，但我完全感到困惑。 任何建議，不勝感激。

我模板中的相關標記

<uib-accordion>
    <uib-accordion-group heading="1" is-open="true">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </uib-accordion-group>
    <uib-accordion-group heading="2">
        content
    </uib-accordion-group>
    <uib-accordion-group heading="3">
        content
    </uib-accordion-group>
</uib-accordion>

JS，顯示我的angular-ui-router設置（可能不相關）

(function(){
var app = angular.module("mapc-workshop", ["ui.router", "ui.bootstrap", "ngAnimate"]);

app.factory('workshopModel', ['$http', function($http){
    var workshopStuff = $http.get("data/workshop_activities.json").then(function (resp) {
        return resp.data;
    });

    var factory = {};
    factory.all = function(){
        return workshopStuff;
    }
    return factory;
}]);

app.config( function($stateProvider, $urlRouterProvider){

    $stateProvider
        .state("workshop", {
            url: "/workshop/{section}/{subsection}/{activity}",
            templateUrl: "assets/js/app/templates/workshop_home.html",
            params: { 
                section: {value: null, squash: true}, 
                subsection: {value: null, squash: true},
                activity: {value: null, squash: true}
            },
            resolve: {
                workshop_data: ['workshopModel',
                    function( workshopModel){
                        return workshopModel.all();
                    }]
            },
            controller: "WorkshopController"


        });
    $urlRouterProvider.otherwise('/workshop/');

});
}());

筆記

• 我沒有在CSS中進行與轉場或動畫相關的任何操作
• 我試圖刪除所有ng-show或ng-repeat來消除它們，因為它們可能是罪魁禍首。
• 我沒有在控制器中做任何與手風琴或動畫有關的事情。
• 當我在Chrome檢查器中查看時，也無法找到要添加動畫/過渡的位置。

感謝您的協助，我們將為您提供任何幫助。

Answer 1

動畫確實會出現在angular-bootstrap演示中 ，但速度非常快。

避免在頁面加載時顯示動畫的最簡單方法是將其隱藏，直到手風琴已被渲染和動畫化為止。

就像是：

<uib-accordion ng-show="pageLoaded">

並在控制器中：

$timeout(function(){
    $scope.pageLoaded = true;  
  }, 100);

這是一個小矮人