使用 Angularjs 动画在悬停时更改元素答案

【问题标题】：Using Angularjs animation to change an element on hover使用 Angularjs 动画在悬停时更改元素
【发布时间】：2013-12-08 09:22:32
【问题描述】：

所以这只是我正在尝试做的一个示例。我想使用 Angularjs 为悬停时元素的不透明度设置动画，但我无法让它做任何事情。我一直在阅读文档，但我似乎无法弄清楚出了什么问题。任何帮助表示赞赏。请参见下面的示例。

提前谢谢你

【问题讨论】：

【解决方案1】：

如果您想在hover 上进行转换，则无需使用angular：

.reveal-animation {
    // add the vendor prefixed versions as well
    transition: all 1s;
}

.reveal-animation:hover {
  opacity: 0.5;
}

应该足够了。

如果你想为元素的进入和离开设置动画，你需要使用更多的角度结构来确保元素确实像这样进入和离开： http://jsbin.com/iwudOjAW/1/edit（包含hover 和enter/leave 效果）。

我使用了ng-route module，并通过更改 URL 的哈希值创建了ng-view 元素enter 和leave。

【讨论】：

@aks。我不确定您指的是问题的哪一部分。据我所知，对 OP 的问题有两种解释：使用角度动画悬停交互（来自他的文本）或动画ng-enter 和ng-leave（来自他的代码）。我在回答中触及了这两个基础：第一个：使用 CSS，因为 Angular 没有（也不需要）控制这种行为，第二个：动画 ng-enter 和 ng-leave。目前还不清楚哪一部分没有得到解决。