Angular.js视图之间的全景动画

市场托马斯

我正在构建AngularJS应用,并希望对不确定的动画做一些棘手的事情。该应用程序的一个方面要求以平移方式在视图之间进行动画处理,但是需要保持单个视图的外观。例如,如果某个场景的中央有一个正方形,那么在视图更改时,该正方形似乎会像离开我们在其他元素进入时平移一样离开屏幕,而所有这些都没有感觉到视图确实改变了。

我知道它ng-animate提供了许多强大的动画功能,但是我对在它们之间进行过渡时保持单个视图外观的最佳方法感到困惑。

有没有人有尝试这样做的经验或知道动画库可以做到这一点?

找到问题后,我将使用可能的解决方案来更新此问题。

像素位

添加视图时,将添加以下类:

 .ng-enter
 .ng-enter.ng-enter-active

删除视图时,将添加以下类:

 .ng-leave
 .ng-leave.ng-leave-active

您可以将CSS 3过渡样式附加到类上,以实现所需的动画效果。

如果我正确理解,则“离开”动画应从0px偏移开始从左向右平移并淡出。“输入”动画也应从负偏移开始从左向右平移,但会逐渐淡入。

这是一个例子:

Plunker演示
JS FIddle演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章