让ng-animate在删除ng-hide时遇到问题

Question

我怀疑这是一个没有真正理解CSS3动画的例子，但总的来说，我发现学习角度动画非常令人沮丧。

因此，首先，我有一个插入器：http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview

由于我需要显示代码才能获得柱塞式链接，下面是测试场景中的CSS：

#wrapper {
    position: relative;
    overflow: hidden;
}

#wrapper, form, #wrapper > div {
    height: 400px;
    width: 400px;
}

#wrapper > * {
  transition: 10s linear all;
}

form {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

form.ng-hide-add-active {
    top: -100%;
}

#wrapper > div {
    position: absolute;
    left: 0;
    top: 0;
    background: #66F;
}

#wrapper.ng-hide.ng-hide-remove-active {
        top: 100%;
}

我有一种情况，我想创建一个表单，如果它成功提交，我希望表单滑上来，并在它下面滑动成功消息。问题是，虽然我可以让窗体滑走，但下面的div就会出现。事实上，它在plunker上比在我的代码上工作得更好，在我的代码中，它开始显示，通过动画消失，然后在表单提交时重新出现。不知道为什么会这样，但总的来说，角度动画让我很沮丧。我尝试过查找示例，很多人都提到使用ng-animate="'name'"创建自定义类，但这似乎对我不起作用。同样，文档中提到了一个ng-hide-remove类，但我从来没有看到它得到应用。

与使用CSS3模块创建自定义动画相比，使用动画过渡有什么优势吗？我知道关键帧可能是最大的优势？这使得在jQuery工作中看起来相对容易的事情变得非常困难……

Answer 1

使用ng-animate="'name'"的示例适用于Angular 1.2之前的版本。

对于这些类型的动画，为每个涉及的元素设想两种状态。

1. Visible
2. Hidden

你有一个包装器。在包装器中，有两个元素与动画有关-一个是form，一个是带有消息的div。现在在考虑可见状态的情况下设置HTML和CSS。当可见时，窗体和div都应该在容器内可见。

这是一个基于你的例子(为了清楚起见，对它做了一些修改)：

#wrapper {
  position: absolute;

  height: 200px;
  width: 200px;

  top: 100px;
  left: 100px;

  border: 1px solid silver;
}

#form {
  position: absolute;

  top: 0;

  height: 100%;
  width: 100%;

  background-color: #DDFEFF;

  transition: all 1s ease-in-out;
}

#submitted {

  position: absolute;

  top: 0;

  height: 100%;
  width: 100%;

  background-color: gold;

  transition: all 1s ease-in-out;
}

窗体和div都与包装器一样大，并且与包装器顶部对齐，这意味着在这种状态下它们将重叠。然而，这不是问题，因为它们不应该同时可见。

现在定义它们的隐藏状态。

例如，窗体在隐藏时应位于包装器的上方：

#form.ng-hide {
  top: -100%;
}

当div隐藏时，应该位于包装器的下面：

#submitted.ng-hide {
  top: 100%;
}

这应该足够了，但根据您使用的AngularJS版本，可能需要进行一些细微的调整。

演示： http://plnkr.co/edit/FDJFHSaLXdoCK7oyVi7b?p=preview