ng-show 和 ng-hide 在几分之一秒内不起作用

Question

在我的应用程序中，我希望根据状态（state1 或 state2）显示两个 div 属性。第一个 div1 包含一个按钮，单击该按钮时会转换到 state2（div1 消失，div2 出现）。

 <div id="state1" ng-show="firstMode"><button ng-click="goTo2()">Go</button></div>
 <div id="state2" ng-hide="firstMode"><button ng-click="goTo2()">Go</button></div>

// 控制器逻辑

$scope.firstMode = true
$scope.goTo2 = function() {
     $scope.firstMode = false
}

在移动设备上查看时，两个 div 都会显示几分之一秒，然后实际状态才会启动。单击按钮转换到 state2 时也会发生同样的情况。加载视图时基本上会发生以下情况：

div1 和 div2 显示

div1 显示，div2 隐藏

点击按钮（显示 div2，隐藏 div1）

div1 和 div2 显示

div2 显示，div1 隐藏

如何防止这种混乱的视图转换和加载？

Answer 1

根据您对问题的描述，您可能已经加载了 ngAnimate，并且您的样式表有一些默认的 css 转换。要验证，请尝试添加：

app.run(function($animate){
    $animate.enabled(false);
})

到你的运行功能。这将全局禁用动画。如果问题消失了，您可以删除并开始尝试找出您的“流氓”css 转换在哪里。