Angular Bootstrap Accordion和ngAnimate，如何在初始页面加载时阻止动画

Question

设置和问题：

我正在使用Angular，angular-bootstrap，angular-animate和angular-ui-router，我想要一个简单的手风琴。让手风琴工作和制作动画很简单，但我想阻止动画在初始页面加载过程中发生。我注意到angular-bootstrap demos中没有出现这个问题，所以我怀疑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 demos上，但速度非常快。

避免在页面加载时显示动画的最简单方法是隐藏它，直到手风琴已经渲染并动画化。

类似的东西：

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

在控制器中：

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

这里是plunker