Question

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

首先，我有一个关于此的人：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类，但我从来没有看到过应用。

使用CSS3过渡是否有利于使用animate模块创建自定义动画，只使用jQuery来执行此操作？我理解关键帧可能是最大的优势？这只是让在jQuery工作中看起来相对容易的事情变得非常困难......

Answer 1

使用ng-animate="'name'"的示例适用于Angular 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

无法使ng-animate工作去除ng-hide

1 个答案: