Angular2动画[隐藏]元素答案

【问题标题】：Angular2 animated [hidden] elementAngular2动画[隐藏]元素
【发布时间】：2017-08-16 00:10:58
【问题描述】：

我有一个边栏，我使用这样的布尔值显示/隐藏：

[hidden]='toggleSidebar'

我一直在尝试找到向此元素添加过渡的正确方法，但到目前为止，使用此方法仅部分成功： [class.show]='!toggleSidebar'。但是，将 css 样式应用于此类仅部分有效。

如何向包含此类路由器插座的元素添加滑入或淡入动画？

<aside [hidden]="toggleSidebar">
  <router-outlet name="aside"></router-outlet>
</aside>

【问题讨论】：

标签： css angular

【解决方案1】：

使用[hidden] 属性，您无法实现过渡/动画效果，因为没有后续步骤更改，而只有反映元素可见或隐藏的状态更改。

您可以使用opacity 和visibility。

<aside class="sidebar" [style.opacity]="toggleSidebar ? '0' : '1'" [style.visibility]="toggleSidebar ? 'hidden' : 'visible'">
  <router-outlet name="aside"></router-outlet>
</aside>

为侧边栏提供状态更改的转换时间。

.sidebar {
  transition: all .3s;
}

注意：如果您希望支持 Internet Explorer 9 和 10，最好避免使用 [hidden] 属性。:)

【讨论】：

这和[hidden]不一样，因为它仍然占用屏幕空间。

【解决方案2】：

可以使用ngIf 实现所需的行为。来自official guide：

虚空状态

称为 void 的特殊状态可以应用于任何动画。它适用于元素未附加到视图的情况，可能是因为它尚未添加或已被删除。 void 状态对于定义进入和离开动画很有用。

在下面的示例中，当条件评估为真时，div 从屏幕顶部显示。

HTML：

<div *ngIf="panelVisible" [@panelInOut]>....</div>

TS：

 @Component({
    ....
    animations: [
        trigger('panelInOut', [
            transition('void => *', [
                style({transform: 'translateY(-100%)'}),
                animate(800)
            ]),
            transition('* => void', [
                animate(800, style({transform: 'translateY(-100%)'}))
            ])
        ])
    ]
})

【讨论】：

这会很好，除非 *ngIf 和 hidden 行为不同 - ngIf 会从 DOM 中删除元素，而 hidden 不会。可能存在您只想隐藏的情况
不希望*ngIf 的一种情况：如果您正在等待<img> 标签在执行淡入动画之前加载它的图像。显然，如果<img>标签不存在，就无法完成图片加载。