使用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隐藏

回答

相关问题