css - 试图通过关键帧理解 AngularJs 动画过渡

Question

我是 Angular 的新手，我对 css3 没有太多经验(我是后端开发人员!)

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

我明白了:

在我的标记中:

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

在我的 Controller 中:

$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 的 flex 缓动过渡(没有 jquery :P)

有人可以帮帮我吗？

Answer 1

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

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

JsFiddle