Question

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

我正在尝试了解如何使用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）

有人可以帮我吗？

Answer 1

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

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

JsFiddle

Answer 2

AngularJS和CSS3是完全不同的两件事

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

之后......基于那个新的CSS类。你可以从CSS触发动画启动

$scope.my_css_clas = 'demo_classs'

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

Angular中的

类附加了ng-class

Answer 3

我认为使用关键帧为当前版本中的ng-hide指令设置动画是不可能的。

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

尝试使用关键帧了解AngularJs动画过渡

3 个答案: