angularjs - ngAnimate 用于显示但不隐藏

Question

我有一个 ngAnimate 可以在显示时将卡片滑入，然后在隐藏时滑出。滑入作品，但滑出没有动画效果。

html...

<div  ng-hide="cardback.id == '{{n.id}}'" ng-show="cardback.id != '{{n.id}}'" ng-animate="{show: 'example-show', hide: 'example-hide'}">

而CSS是

.example-show, .example-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
}

.example-show {
  top:-200px;
}
.example-show-active {
  top:0px;
}

.example-hide {
  top:0px
}
.example-hide-active {
  top:-200px;
}

我正在运行 6 月 3 日的 1.1.5

Answer 1

一些东西：

1. 双卷发真的不应该在那里。ng-hide/show值已经是角度表达式，因此不需要它们。例如以下应该足够了

   ng-hide="cardback.id == n.id"
   

2. 具有ng-hide/show完全相反的条件的相同元素似乎很奇怪。我想，一个就够了。

3. 您用作top转换属性，但没有position定义。这可能是粘贴事故，但如果不是，您也应该检查一下。

这是一个工作示例。尽管没有您方面的进一步输入，但这只是猜测。