angularjs - 无法让 ng-animate 移除 ng-hide

Question

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

所以首先，我有一个 plunker:http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview

因为我需要显示代码来获得一个 plunker 链接，这里是测试情况下的 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 上比在我的代码上工作得更好，它开始显示，通过动画消失，然后在提交表单时重新出现。不知道为什么会这样，但总的来说，Angular 动画让我很沮丧。我尝试查找示例，许多人提到使用 ng-animate="'name'" 创建自定义类，但这似乎对我不起作用。同样，文档提到了一个 ng-hide-remove 类，但我从未看到它得到应用。

与使用 animate 模块创建自定义动画并仅使用 jQuery 相比，使用 CSS3 转换有什么优势吗？我了解关键帧可能是最大的优势？这只会让在 jQuery 工作中看起来相对容易的事情变得非常困难......

Answer 1

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

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

1. 可见
2. 隐藏

你有一个包装器。在包装器内，动画中涉及两个元素 - 一个表单和一个带有消息的 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