如何在 Aurelia 中显示/隐藏动画组件答案

【问题标题】：How to show/hide animated component in Aurelia如何在 Aurelia 中显示/隐藏动画组件
【发布时间】：2016-03-11 12:39:28
【问题描述】：

我有一个子组件，我想以动画方式显示/隐藏它，就像 Bootstrap 的 collapse 组件一样。触发可见性的按钮位于外部视图中（而不是子视图内部）。

使用基本语法时

<compose view-model="edit-x" model.bind="x" show.bind="shouldShow"></compose>

（或具有自定义html元素名称的相应语法），它可以工作，但它只是出现（不是动画）。

建议 1 - 使用 Aurelia 动画

我确实尝试添加 class='au-animate' 但没有任何效果（为此还包括 main.js 中的 aurelia-animator-css）。

建议 2 - 使用 Bootstrap

另一个可能的解决方案可能是利用 Bootstrap，并将第二个参数（可见）传递给组件，然后让组件以某种方式监视该变量并调用 $('.collapse').collapse('toggle')。然后我将如何在model.bind 中传递两个变量？以及如何监控它？可以在 setter 上使用@bindable 吗？

建议 3 - 从外部组件使用 Bootstrap

也许最简单的方法是从外部调用$('#subcomponentName .collapse').collapse('toggle')？这么丑？我从外部视图中引用子视图中的元素，这可能跨越了一些边界，但代码会很小？

【问题讨论】：

aurelia-animator-css 仅在视图从 DOM 中移除时才会生效，show.bind 不会这样做，它只会隐藏元素。而是尝试if.bind="shouldShow"。
@Gusten 你想提交这个作为答案吗？我认为它解决了问题

标签： aurelia

【解决方案1】：

（在这里回答我自己的问题，因为还有更多工作要做）

让这个工作：

首先关注@Gusten 关于if.bind 而不是show.bind 的评论。然后通过添加动画的 CSS 类。似乎动画元素（具有au-animate css 类的元素）必须是根<template> 元素下方的第一个元素。

所以在我的 CSS 中：

div.test.au-enter-active {
  -webkit-animation: fadeInRight 1s;
  animation: fadeInRight 1s;
}

然后是元素：

<template>
  <div class="test au-animate">
  ...

（注意au-animate + 我自己的test 类，后者只是为了方便选择元素）

fadeInRight CSS 动画在 CSS 文件的其他位置定义。

【讨论】：