Aurelia 动画不启动

Question

我正在尝试使用 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>

然后在代码中，我设置了 showMessage=true 并且元素显示了消息，但它没有动画。

但它没有动画。我错过了什么吗？

Answer 1

事实证明，要使动画与 if.bind 配合使用，au-animate class 需要位于同一元素中，如下所示：

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

Aurelia 动画不启动

Aurelia Animation Not Kicking In

aurelia