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

Question

我有一个子组件,我想以动画的方式显示/隐藏,就像Bootstrap的崩溃组件一样.触发可见性的按钮位于外部视图中(不在子视图内).

使用基本语法时

<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呢？以及如何监控它？一个人可以@bindable在二传手上使用吗？

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

也许最简单的方法就是$('#subcomponentName .collapse').collapse('toggle')从外面看来？这个难看吗？我在子视图中引用外部视图中的元素,这可能是跨越某些边界,但代码会很小？

Answer 1

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

让这个工作：

首先遵循 @Gusten 关于if.bind而不是 的评论show.bind。然后通过添加 CSS 类来实现动画。看起来动画元素（具有au-animatecss 类的元素）必须是根元素下面的第一个元素<template>。

所以在我的 CSS 中：

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

然后是元素：

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

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

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