Question

假设你在component.html上有两个这样的div

<div *ngIf="htmlSegment == 'a" >
    {{someMessage}}
</div>


<div *ngIf="htmlSegment == 'b" >
    {{someMessage}}
</div>

当你将htmlSegment设置为a或b时，我们知道truthy值段活跃而另一个将消失。没问题。

但是，如果使这些片段的出现和消失变得活跃起来并带来一些过渡效果，那么它是什么呢？如淡入或淡出等？

是否有可能确保在新的htmlSegment中完成dom之后开始转换？（这样，除了真棒淡入和淡出外，用户不会遇到任何闪烁或页面抖动。）

Answer 1

这样的事情怎么样？

span {
  opacity: 0;
  transition: opacity 1s;
}

.active span {
  opacity: 1;
}

然后在你的模板中：

<div [ngClass]="(htmlSegment=='a')?'active':'not-active'" >
    <span>{{someMessage}}</span>
</div>

<div [ngClass]="(htmlSegment=='b')?'active':'not-active'" >
    <span>{{someMessage}}</span>
</div>

Answer 2

Animate模块不会为HTML元素设置动画，但是当Animate注意到某些事件（如隐藏或显示HTML元素）时，该元素会获得一些可用于制作动画的预定义样式（或类）。 / p>

将animate模块添加到项目中：

function bind (vm, key, source) {
  var asObject = false
  var cancelCallback = null
  var readyCallback = null
  // check { source, asArray, cancelCallback } syntax
  if (isObject(source) && source.hasOwnProperty('source')) {
    asObject = source.asObject
    cancelCallback = source.cancelCallback
    readyCallback = source.readyCallback
    source = source.source
  }

向组件添加动画属性：

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

当herostate改变时，将调用触发器。

最后，您的HTML代码将是：

animations: [
  trigger('heroState', [
    state('a', style({
     backgroundColor: 'yellow',
     opacity:0.5
    })),
    state('b', style({
     backgroundColor: 'black',
     opacity:1
    })),
    transition('a => b', animate('100ms ease-in')),
    transition('b => a', animate('100ms ease-out'))
  ])
]

我无法创建此代码的Angular2在线示例，但我创建了一个AngularJS在线示例，用于感知动画中究竟发生了什么。（对于更改动画，您可以将'nga-slide-down'类更改为'nga-淡出'或你自己的课）

Check Online(AngularJS - check auto-run js at the right panel and click on change button)

我们如何在Angular中向* ngIf添加过渡效果？

2 个答案: