问题标签 [ng-animate]

我正在尝试使用 ng-animate 和 ng-view 获得 3D 立方体效果动画。

当我切换到另一个页面时，我想感觉自己在一个立方体上旋转。当我单击“转到第 2 页”时，实际的“第 1 页”将离开并向左旋转，“第 2 页”将从右侧到达。

我有一些接近但非常脏的 CSS 过渡，当我切换页面时，它们不会“粘”在一起。

代码示例：http: //jsfiddle.net/bnyJ6/

我试过这样：

HTML：

角 JS：

CSS3-Dirty- 动画：

你知道如何获得这个 3D Cube 效果动画吗？

感谢您提供的各种帮助。

问题在于 requireJS 和 ngAnimate 使用自定义 JavaScript 动画。主要是 setup 和 start 方法没有被调用。我可以确认文件是通过 requireJS 加载的，但没有触发动画。尽管我已遵循所有说明，但我开始认为我的代码不正确。有人可以用 RequireJS 发布一个实现吗？或指出我的错误？

我认为执行我的动画的方式如下

我是在不正确地声明动画还是这段代码有问题？

我有一个带有 ng-view 的 div 元素，效果很好。我一直在尝试使用 CSS 过渡做一个简单的幻灯片，似乎我所有的动画工作都是无用的，元素只是眨眼间出现/消失。尝试了 AngularJS 1.1.4 和 1.1.5，它没有帮助。任何人的想法？

这是代码：

主页.html

动画.css

我正在使用 ngAnimate 为 max-height 设置动画以获得简单的滑动切换效果，并且发生了一些奇怪的事情：当 hide 时，似乎在 setup 类 ( .xxx-hide) 上设置 transition 属性不起作用——高度立即捕捉到 0：

但是将它设置在活动类（.xxx-hide.xxx-hide-active）上，动画效果很好：

（这是整个小提琴。）

更奇怪的是，在这两种情况下，不透明度的动画效果都很好。这里发生了什么？

所需的行为是单击图像，并<div>在 1 秒内轻松达到全高度。再次单击图像时，我需要<div>在 1 秒内恢复到隐藏状态。

现在会发生什么：

• 单击图像会<div>立即显示，没有过渡。
• 再次单击会在两秒钟后<div>隐藏。隐藏时没有过渡。

我的指令的 JS：

在 HTML 中调用它：

CSS定义：

我究竟做错了什么？

大家好，

阅读这个谷歌组和从那里链接的小提琴和博客文章，我设法让页面转换与 ng-animate 一起工作。

这是我的小提琴

通过在 ng-view 上设置“transitionClass”（.LR 或 .RL），我能够为每个视图更改触发不同的 css 转换。

现在，我想要做的是手动应用“后退”转换，以防将视图更改为后退一步，无论该后退是由应用程序中的链接还是浏览器的后退按钮引起的。

为此，在 app.run() 中，我正在监听 $locationChangeStart，保存当前的 url slug，然后在下一个 $locationChangeStart 上检查它以确定我们是否要返回一页。如果是这种情况，则应用“后退”转换。

这工作得很好，除了...

进入页面 (.page-enter, .page-enter-active) 正在按预期转换，而离开页面 (.page-leave, .page-leave-active) 似乎卡在之前使用的转换上。

我希望，在ng-view上设置一个transitionClass'LR'，进入和离开的两个页面都使用'.LR page-enter'和'LR page-leave'的css转换。

似乎会发生什么：如果 transitionClass 之前是“ANY”，则 ng-animate 将使用“.LR page-enter”作为进入页面，使用“.ANY page-leave”作为离开页面。

重现“错误”：

应用程序从第 1 页开始。从 1 到 2。现在从 2 到 3，这个过渡被打破了。从 3 到 1，此转换按预期工作。两个转换都是“RL”（从右到左），所以它们看起来应该是一样的。唯一的区别是第 2 页输入“LR”，而第 3 页输入“RL”。所以，实际上，当从 2 变为 3 时，第 1 页将使用最初为第 3 页设置的“.enter-active”转换。

这是预期的行为吗？

我现在很困惑，但仅在上周左右使用 angular 并且 ng-animate 是相对较新的功能，我很可能会遗漏一些东西。因此，在报告错误或任何事情之前，我欢迎对此提出任何意见。

谢谢！

我对 AngularJS 很陌生，我正在尝试将以下 jQuery 代码迁移到 AngularJS。

我开始转换为 AngularJS 的 HTML 看起来像

当用户与应用程序交互时，元素被动态添加到 ng-repeat 列表中，因此使用了 jQuery.on()。如果有帮助，我可以使用不稳定版本的 AngularJS。

我应该如何在 AngularJS 中重写 jQuery 片段？我现在已经尝试了一些东西，包括添加一个新指令、使用 ng-animate 等。但是当我将 jQuery 代码添加到我的 ng 控制器中时，它开始看起来很难看——我想避免任何混合。

非常感谢！

我正在尝试使用 ng-view 在视图之间产生简单的幻灯片效果。我不确定我是否做得对。代码如下：

脚本：（1.15）

路由：

包含用于切换视图的 ng-view 和 ng-click 的 HTML：

控制器 fn 用于切换视图：

用于实现动画效果的 CSS：

内容仍然显示（但现在闪烁）并且幻灯片动画不起作用。任何帮助，将不胜感激。

更新：我将 css 语法修复为 1.15。不幸的是，它仍然无法正常工作。我正在使用 flexbox，我认为这是问题的原因。有人在使用 ng-animate + flexbox 时遇到过类似的问题吗？

我有一些工作（动画），但它看起来并不漂亮。

当动画/幻灯片被触发时。“离开”幻灯片弹出到屏幕左侧并拥抱“进入”幻灯片。

它还会在动画期间超出端点，然后回弹。我的 ng-animate css 如下：

CSS：

这是一个半工作的plunkr。注意“离开”视图拥抱“进入”视图。您可以通过按标题中的黑色方块来启动动画。

http://plnkr.co/edit/FG44cpJ65S4Gr6QZpm1X?p=preview

我正在使用 AngularJS 1.1.5 并尝试使用 daneden 的 animate.css 的 ng-animate 指令。我有几个使用路由设置的视图。我正在使用 Twitter Bootstrap 3 RC1。

这是 ng-view 的代码：

这是路由部分：

动画有效（即，我看到了动画效果）并且视图也发生了变化。

我遇到的问题是“离开”视图似乎仍在占用空间，而“进入”视图正在动画。

效果是新视图的进入动画发生在离开视图先前占用的空间下方。就好像旧视图仍然存在，即使它已经“动画出来”了。一旦动画完成，新视图就会突然跳到正确的位置。我使用fadeInRightBig 进入，使用fadeOutLeft 离开。

如何解决这个问题？预期的结果是没有抖动的平滑过渡，就像幻灯片 1 到 3 中的 ng-switch 动画一样。（当然，我使用的是 ng-view。）

谢谢！

编辑：

我收回它，当“进入”动画正在运行时，“离开”动画还没有完全完成。

所以我想我的问题会有所改变。但预期的结果是一样的。如何实现平滑的“滑动”效果？