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

Question

我有一个子组件，我想以动画方式显示/隐藏它，就像 Bootstrap 的折叠组件一样。触发可见性的按钮位于外部 View 中(而不是 subview 内部)。

使用基本语法时

<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')从外面看？这么丑？我从外部 View 中引用 subview 中的元素，这可能会跨越一些边界，但代码会很小吗？

Answer 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 文件的其他地方定义。