试图用关键帧理解 AngularJs 动画过渡答案

【问题标题】：Trying to understand AngularJs animation transitions with keyframes试图用关键帧理解 AngularJs 动画过渡
【发布时间】：2014-02-04 05:03:39
【问题描述】：

我是 Angular 新手，对 css3 没有太多经验（我是后端开发人员！）

我正在尝试了解 Angular 如何使用 css3 关键帧管理自定义过渡。

我知道了：

在我的标记中：

<div id="welcome-container" ng-hide="test">
...
</div>

在我的控制器中：

$scope.test = false;
// ... doing some things that takes more than 3-4 seconds
$scope.test = true;

在我的 CSS 中：

#welcome-container.ng-hide {
    animation:1s mycustomkeyframe;
    -webkit-animation:1s mycustomkeyframe;
}

@keyframes mycustomkeyframe {
    from { opacity: 1; }
    to { opacity: 0; }
}

@-webkit-keyframes mycustomkeyframe {
    from { opacity: 1; }
    to { opacity: 0; }
}

我用 ng-hide-add 和 ng-hide-active 类运行了这个示例，但我真的迷失了关键帧。我的代码隐藏了 div 但它不做任何动画！我想使用关键帧来做类似 jquery 的弹性缓动转换（没有 jquery :P）

有人可以帮帮我吗？

【问题讨论】：

标签： css angularjs

【解决方案1】：

以前从未使用过 Angular，但从 CSS 的角度来看，您的 div 上没有 ng-hide 类。

<div id="welcome-container" class="ng-hide" ng-hide="test">
Here is a bunch of text blah
</div>

JsFiddle

【讨论】：

【解决方案2】：

AngularJS 和 CSS3 是两个完全不同的东西

Angular 可用于将 CSS 类附加到容器

然后..基于那个新的 CSS 类。您可以从 CSS 开始触发动画

$scope.my_css_clas = 'demo_classs'

<div ng-class="{{ my_css_clas }}">

Angular 中的类使用ng-class 附加

【讨论】：

【解决方案3】：

我认为当前版本的 ng-hide 指令无法使用关键帧制作动画。

您必须使用另一个类来制作动画，然后在动画结束时执行隐藏操作或使用另一个 ng-directive，例如 ng-leave。

【讨论】：