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

我有一个子组件，我想以动画的方式显示/隐藏它，就像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-使用引导

另一种可能的解决方案可能是利用引导，向组件传递第二个参数（可见），然后让组件以某种方式监视该变量并调用

$（'.collapse'）.collapse（'toggle'）

。然后如何在

model.bind

中传入两个变量？如何监控？一个人可以在setter上使用

@bindable

建议3-从外部组件使用引导

也许最简单的方法是从外部视图调用

$（'#subcomponentName.collapse'）。collapse（'toggle'）

？有这么难看吗？我从外部视图引用子视图中的元素，这可能会跨越一些边界，但代码会很小？

（在这里回答我自己的问题，因为要让它工作还有很多事情要做）

让这个工作：

首先，跟随@Gusten关于

if.bind

的评论，而不是

show.bind

。 然后为动画添加CSS类。 看起来动画元素（带有

au animate

css类的元素）必须是根

元素下面的第一个元素

所以在我的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文件中的其他位置定义。

aurelia animator CSS仅在视图从DOM中删除时生效，而

show.bind不起作用，它仅隐藏元素。相反，请尝试
if.bind=“shouldShow”
@Gusten是否将此作为答案提交？我认为它解决了这个问题