Question

我有一个子组件，我想以动画的方式显示/隐藏，就像Bootstrap的崩溃组件一样。触发visiblity的按钮位于外部视图中（不在子视图内）。

使用基本语法时

<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')？这个难看吗？我从外部视图中引用子视图中的元素，这可能是跨越某些边界，但代码会很小？

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

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

1 个答案: