Аурелия Анимация не врывается - PullRequest
Новая
       10

Аурелия Анимация не врывается

0 голосов
/ 02 июня 2018

Я пытаюсь настроить простую анимацию для работы с 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 и элемент показывается с сообщением, но он не анимируется.

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

1 Ответ

0 голосов
/ 02 июня 2018

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

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