我怀疑这是一个没有真正理解 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 工作中看起来相对容易的事情变得非常困难......
最佳答案
使用 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 版本进行微调。
关于angularjs - 无法让 ng-animate 移除 ng-hide,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33485095/