Aurelia Animation Not Kicking In

Question

I am trying to get some simple animiation to work with Aurelia;

First, I have the plug-in in main:

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

Then I define some css for the animation:

.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;
    }
}

Then I use it in the html:

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

Then in code, I set showMessage=true and the element shows with the message, but it does not animiate.

But it doesn't animate. Am I missing something?

Answer 1

Turns out for the animation to work with if.bind, the au-animate class needs to be in the same element, like this:

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