Я пытаюсь заставить работать с Аурелией простую анимацию;

Во-первых, у меня есть плагин в 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, и элемент отображается вместе с сообщением, но не анимируется.

Но не оживает. Я что-то пропустил?

0
Greg Gum 2 Июн 2018 в 03:18

1 ответ

Лучший ответ

Оказывается, чтобы анимация работала с if.bind, класс au-animate должен находиться в том же элементе, например:

<div  class="my-cool-element">
  <div if.bind="showMessage" class="au-animate">
    <div class="navbar">${message}</div>
</div> 
1
Greg Gum 2 Июн 2018 в 01:29