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类需要在同一个元素中，如下所示：

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

Aurelia动画没有踢

1 个答案: