Question

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

[hidden]='toggleSidebar'

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

如何向包含路由器插座的元素添加幻灯片或淡入动画？

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

Answer 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]属性。:)

Answer 2

fs.createReadStream(filePath + "/" + fileName) .pipe(replaceStream(imagePath, newPath)) .pipe(process.stdout);可以实现所需的行为。来自official guide：

虚空状态

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

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

HTML：

ngIf

TS：

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

Angular2动画[隐藏]元素

2 个答案: