Aurelia 奥雷莉亚动画没有开始

我正在尝试一些简单的动画来与奥雷莉亚合作

首先，我在main中有插件：

.plugin(PLATFORM.moduleName('aurelia-animator-css')) 

然后我为动画定义了一些css：

.my-cool-element > .au-enter {
    opacity: 0 !important;
}

.my-cool-element > .au-enter-active {
    -webkit-animation: fadeIn 5s;
    animation: fadeIn 5s;
}

.my-cool-element > .au-leave-active {
    -webkit-animation: fadeOut 5s;
    animation: fadeOut 5s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

然后我在html中使用它：

<div class="my-cool-element">
  <div class="au-animate">
    <div if.bind="showMessage"  class="navbar">${message}</div>
   </div>  
</div>

${message}

然后在代码中，我设置showMessage=true，元素随消息一起显示，但它不会动画化

---

但它没有动画。我遗漏了什么吗？

为了让动画与

if.bind

一起工作，

au animate

类需要位于同一元素中，如下所示：

<div  class="my-cool-element">
  <div if.bind="showMessage" class="au-animate">
    <div class="navbar">${message}</div>
</div> 

${message}

我可能错了，但我认为动画插件主要用于制作路线动画。我非常确定我记得git hub用户页面上的骨架以及路线。