Angular 动画 ng-cloak 不透明度

Posted 2023-03-06

【中文标题】Angular 动画 ng-cloak 不透明度

【英文标题】：Angular animate ng-cloak opacity

【发布时间】：2013-08-01 20:44:57

【问题描述】：

我似乎无法为ng-cloak 设置动画。本质上，我正在尝试为 div from .containter.ng-cloak to .container.ng-binding 制作动画 但它似乎不起作用——Angular 会立即使用 container ng-binding 类加载 div，而忽略 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 从蓝色转换为红色似乎可以正常工作。 为简洁起见，我省略了供应商前缀。

提前致谢。

【参考方案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。

【讨论】：

这很好用，谢谢，但我更感兴趣的是为什么我的ng-cloak 方法不起作用，而理论上它应该起作用。

我喜欢这个！真的不需要 ngAnimate 或 AngularJS 即可工作:)。您可能可以使用 jquery 的“当窗口完全加载时”侦听器来切换它。 onehungrymind.com/ng-animate-first-look-with-angularjs-wizard

由于 div css，我实际上无法使用 ngAnimate 完成这项工作，这是基于您的替代方案：jsfiddle.net/coma/UxcxP/2

这在 Chrome 中似乎不起作用。将@coma 的 JSFiddle 分叉为 15 秒的持续时间。我看到它在使用 Safari 和 Firefox 时逐渐消失，但在 Chrome 中它直接完全不透明。 jsfiddle.net/7Nnhy

@coma 不错，这行得通。由于修复涉及将 ng-app 更改为从 JS 引导，这是否意味着如果您使用 ng-app，此效果在 Chrome 中不起作用？我试过了，好像是这样。

【参考方案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;

【讨论】：

只是一个额外的 CSS 类。太好了。

【参考方案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;

【参考方案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>