角动画ng-cloak不透明度

Question

我似乎无法动画ng-cloak.从本质上讲,我想一个动画div 从 .containter.ng-cloak 到 .container.ng-binding ,但它似乎没有工作-角加载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;
}