使用ngAnimate與NG-顯示/ NG隱藏

我有這個網站：使用ngAnimate與NG-顯示/ NG隱藏

<div ng-if="true"> 
    <div ng-show="hideMe"> 
     <div class="random" ng-include="'template.html'"></div> 
    </div> 
    </div> 

    <br> 
    <button ng-click="hideMe = false">hide</button> 
    <button ng-click="hideMe = true">show</button>

然後，我有這樣的造型：

.random.ng-enter { 
    transition: 2s ease all; 
    opacity: 0; 
    transform: translateY(100%); 
} 

.random.ng-enter.ng-enter-active { 
    opacity: 1; 
    transform: translateY(0); 
} 

.random.ng-leave { 
    transition: 10s ease all; 
    opacity: 1; 
    transform: translateX(0); 
} 

.random.ng-leave.ng-leave-active { 
    opacity: 0; 
    transform: translateX(50%); 
}

模板：

<p>a simple paragraph</p> 

<div ng-repeat="user in info"> 
    {{user.nome}} 

</div>

當我首先加載頁面，ng-enter-active可以完美地工作，但是當我使用按鈕隱藏或顯示ng-enter和ng-leave不起作用時。任何人都知道我錯過了什麼？

謝謝:)

在這裏，你有一個顯示我剛剛暴露的東西。

DEMO

來源

2017-09-18 N.Car

你可以更精確的關於您的問題的元素被使用？如果您向我們展示我剛剛添加的template.html –

的內容，那就太好了。這一切都在掠奪者身上。基本上當我按隱藏或顯示時，我想讓它假設我在ng-leave和ng-enter上設置的配置 –

不要忘記標記答案是正確的，因此該主題已關閉;） –

編輯您的HTML這樣的：

<div ng-if="true"> 
    <div ng-if="hideMe" class="random"> 
     <div ng-include="'template.html'"></div> 
    </div> 
    </div>

這應該工作。

類隨機應與顯示/隱藏，它應該是有NG-如果

來源

2017-09-18 20:18:35

非常感謝！我不知道它需要與ng-if在同一個元素中 –

使用ngAnimate與NG-顯示/ NG隱藏

回答

相關問題