html - Angular 动画 ng-cloak 不透明度

Question

我似乎无法制作动画ng-cloak。本质上，我正在尝试为div from .containter.ng-cloak to .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;
}

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

斗篷不会像你想要的那样工作，因为它会在那里（作为一个类、属性、元素......），直到 Angular 用它的模板过程的结果替换它，所以它不是同一个节点，这就是为什么它不会得到转换（当相同元素发生变化时发生转换），没有变化，只是不是同一个节点。

看看这个：

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

正如您在该示例中所见，被“角化”的 div 旁边的 div 正在获取淡入淡出动画，因为即使在 Angular 发生之前它也是同一个 div。

Answer 2

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

我用它来动画 Jade 生成的标记。您的里程可能会因 Angular 运行时模板化标记而异。

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

一个没有向 HTML 添加额外类的纯 CSS 解决方案：

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 上使用 angular 不绑定的 cloak，所以这就是我最终要做的......

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

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>