帶$ state.includes的ng-show閃爍/閃爍 - 角度; UI路由器

如這裏所描述How to ng-hide and ng-show views using angular ui router，我有以下的標記：

<div class='container'> 
    <div ng-show='$state.includes('state1')></div> 
    <div ng-show='$state.includes('state2')></div> 
</div>

在CSS使用Flex-箱：

.container { 
    display: flex; 
    flex-direction: column; 
}

現在，當我在兩種狀態之間切換兩個div的顯示眨眼之間導致醜陋的眨眼效果。

我嘗試了Angularjs - ng-cloak/ng-show elements blink的ng-cloak，但沒有任何成功。

我不能使用ng-if自從我使用ui-router-extras的「粘滯狀態」，這需要DOM持久化。

來源

2016-11-27 Stefan

您是否嘗試過使用ng-animate動畫'ng-show'？恩。 '.ng-hide-add {animation：0.5s showdiv ease; } .ng-hide-remove {animation：0.5s hideDiv ease; }' – Erevald

默認情況下使用備用css類來隱藏。 '

'。默認隱藏應該有'display：none'避免'！important'。 –

隱藏添加被延遲，但隱藏刪除不是。當我將時間設置爲2秒左右時，結果眨眼變成長時間閃爍。它顯示了一個很好的解決方案，但通過延遲隱藏刪除而不是隱藏添加。只有我不能得到這個工作.. – Stefan

$state將無法使用HTML中使用這樣

1）你可以做這樣的事情在按Ctrl

$scope.state = $state;

，但我不會推薦這

2） HTML

<div class='container'> 
    <div ng-show="showThis('state1')"></div> 
    <div ng-show="showThis('state2')"></div> 
</div>

In Controller

$scope.showThis = function(type){ 
    return $state.includes(type); 
}

來源

2016-11-27 17:29:27 nmanikiran

感謝您的快速響應。我使用你的第一個選項。在選項2中，問題依然存在。 – Stefan

即使你已經提到的，你已經嘗試NG-斗篷，我認爲正確的答案，你的問題確實是NG-斗篷的：

[ng\:cloak], [ng-cloak], .ng-cloak { 
    display: none !important; 
}

風格的配置。 I have made an example on CodePen.io that show exaclty this solution working with Angular UI Router.正如你所看到的例子，整個視圖閃爍，正如你所說，但是，如果添加了「NG-斗篷」指令到：

<div ng-app="myApp">

那麼這將成爲：

<div ng-app="myApp" ng-cloak>

你會看到Angular protects the view from being showed (blinking).這就是'ng-cloak'指令的目的。

希望這個例子可以幫助你解決你的問題。

來源

2016-11-27 17:50:55

感謝CodePen。可悲的是它不起作用。當我移除Pen中的ng-cloak時，我也看不到任何閃爍。 – Stefan

您可以使用ng樣式來消除閃爍效應。

<div class='container'> 
    <div ng-style="{'display': $state.includes('state1') ? 'block' : 'none'}"></div> 
    <div ng-style="{'display': $state.includes('state2') ? 'block' : 'none'}"></div> 
</div>

我不確定爲什麼ng-show會觸發粘滯狀態的閃爍效應，但是此解決方法解決了此問題。

來源

2017-09-13 14:43:38

帶$ state.includes的ng-show閃爍/閃爍 - 角度; UI路由器

回答

相關問題