Question

我似乎无法为ng-cloak制作动画。从本质上讲，我正在尝试将div 从 .containter.ng-cloak 设置为 .container.ng-binding 但它似乎不起作用 - Angular立即加载div container ng-binding个类，忽略了transition规则。

我甚至尝试将transition-delay设置为几秒钟，没有骰子。

HTML

<div class="container ng-cloak" ng-controller="AppCtrl">

CSS

.container.ng-cloak,
.container.ng-binding {
    opacity: 0;
    transition: opacity 800ms ease-in-out;
}
.container.ng-binding {
    opacity: 1;
}

值得注意的是：

将background-color从蓝色转换为红色似乎按预期工作。
为了简洁起见，我省略了供应商前缀。

提前致谢。

Answer 1

另一种方法：

http://jsfiddle.net/coma/UxcxP/2/

<强> HTML

<section ng-app>
    <div ng-class="{foo:true}"></div>
</section>

<强> CSS

div {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

div.foo {
    opacity: 1;
}

这将像斗篷一样工作，因为Angular在加载之前不会设置foo类。

斗篷将无法正常工作，因为它会在那里（作为类，属性，元素......），直到Angular将其替换为模板化过程的结果，因此它不是同一个节点这就是为什么它不会得到转换（当同一个元素发生变化时发生转换），没有改变，只是不是同一个节点。

看看这个：

http://jsfiddle.net/coma/UxcxP/5/

正如你在那个例子中看到的那样，“愤怒的”旁边的div正在获得淡入淡出动画，因为即使在Angular发生之前它也是相同的div。

Answer 2

我意识到这是一个公认的答案;但是，这对于最初尝试的ng-cloak指令是可行的。

我用它来为Jade生成的标记设置动画。您的里程可能会随着角度运行时模板标记而变化。

http://codepen.io/simshanith/pen/mqCad

HTML

<div class="container ng-cloak fade-ng-cloak" ng-controller="AppCtrl">

CSS

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}
.fade-ng-cloak {
  opacity: 1;
  -ms-filter: none;
  -webkit-filter: none;
          filter: none;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.fade-ng-cloak[ng-cloak] {
  display: block !important;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.fade-ng-cloak.ng-cloak,
.fade-ng-cloak.ng-binding {
    opacity: 0;
    transition: opacity 800ms ease-in-out;
}
.fade-ng-cloak.ng-binding {
    opacity: 1;
}

Answer 3

纯CSS解决方案，无需向HTML添加额外类：

<强> HTML

<div ng-cloak>{{myProperty}}</div>

<强> CSS

[ng-cloak] {
    display: block !important;
    opacity: 0;
}

[ng-cloak],
.ng-binding {
    transition: opacity 300ms ease-in-out;
}

.ng-binding {
    opacity: 1;
}

Answer 4

我的解决方案与其他一些解决方案类似，但是我的用例要求我在一个角度没有绑定的div上使用斗篷，所以这就是我最终做的......

（为简洁省略了浏览器前缀）

<强> CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
    display: none !important;
}

.fade-ng-cloak {
    display: block !important;
    opacity: 1;
    transition: opacity 0.5s;
}

.fade-ng-cloak.ng-cloak {
    opacity: 0;
}

<强> HTML

<div class="row ng-cloak fade-ng-cloak">
    <div class="col-xs-12">
        <uib-accordion close-others="true">
            ...
        </uib-accordion>
    </div>
</div>

角动画ng-cloak不透明度

HTML

CSS

4 个答案:

HTML

CSS